Gatsby 2 və Redux ilə işə başlamaq

Gatsby 2 və Redux bir stəkandakı konfet kimi əriyir

Gatsby + Redux, dinamik qabiliyyətli statik veb tətbiqetmələr yaratmaq üçün güclü bir birləşməsidir. Gatsby 2 ilə işə düzəlmək heç vaxt asan olmamışdı. Bu gün sizi lazımi addımlarla gəzdirəcəyəm.

Oxumağın böyük bir pərəstişkarı deyilsiniz? Straight Redux başlanğıcına birbaşa gedin: https://github.com/caki0915/gatsby-redux-test/ və ya Gatsby CLI-dən istifadə edin:

npx gatsby yeni gatsby-redux-test https://github.com/caki0915/gatsby-redux-test/

Gatsby nədir

Gatsby, ən populyar statik veb sayt istehsalçılarından biridir. Webpack, React və GraphQL ilə əvvəlcədən qurulmuş şəkildə veb tətbiqləri qurarkən sizə böyük bir başlanğıc verir. Ayrıca, müxtəlif məlumat mənbələrinə qoşulmağı asanlaşdıran zəngin bir eklentinin ekosistemi ilə təchiz edilmişdir. Veb saytlarında Gatsby haqqında daha çox oxuyun.

Redux nədir?

Redux, React tətbiqetmələri ilə birlikdə tez-tez istifadə olunan bir status konteyneridir. Bu məqalədə Redux-un necə işlədiyini artıq bildiyiniz düşünülür. Redux ilə yenisinizsə və ya bir xülasəyə ehtiyacınız varsa, daha çox məlumat üçün veb səhifəni ziyarət edin.

Gedək!

Əvvəlcə yeni bir Gatsby layihəsi yaradın. Terminalda aşağıdakıları edin: (Gatsby-redux-testi seçdiyiniz adla əvəz edin.)

npx gatsby yeni gatsby-redux-test & cd gatsby-redux-test

Növbəti addım NPM-dən Redux və React-Redux paketlərini quraşdırmaqdır.

npm yüklə - redux reaksiya-redux qeyd edin
Redux və React-Redux paketləri quraşdırılmışdır

Yaxşı, bir vəziyyət əlavə edək!

Src qovluğunuzda dövlət adlı yeni bir qovluq yaradın və bir app.js. yaradın. Bu təlimat bir "darkMode" dəyişənini açma və söndürmə imkanı verən sadə bir funksiya əlavə edir.

Əvvəlcə ilkin vəziyyəti əlavə edin:

const initialState = {isDarkMode: false,};

Fəaliyyət yaradıcısını əlavə edin (darkMode-u açmaq və söndürmək üçün):

const TOGGLE_DARKMODE = 'TOGGLE_DARKMODE';
ixrac const toggleDarkMode = isDarkMode => ({Növ: TOGGLE_DARKMODE, isDarkMode});

Reduktoru əlavə edin:

standart ixrac (state = initialState, action) => {switch (action.type) {case TOGGLE_DARKMODE: return {... state, isDarkMode: action.isDarkMode}; Standart: qayıt statusu; }};
Başlanğıc vəziyyət, fəaliyyət yaradan və reduktor

Tamam! İndi kök reduktorunu əlavə edək. Vəziyyət qovluğunda yeni bir index.js faylı yaradın.

{Redine'dən {CombineReducers} idxal edin; Tətbiqi './app' dan idxal edin;
Standart Kombayn Reduktorlarını ixrac edin ({app});
Kök reduktorumuz.

İndi bir mağaza və provayder yaradaq. Vəziyyət qovluğunda yeni bir ReduxWrapper.js faylı yaradın. Bu komponent Gatsby-də kök komponentimizi əhatə edəcəkdir.

idxal 'reaksiya' ilə reaksiya; {React} redux'dan {provider} idxal edin; {createStore kimi reduxCreateStore} 'redux' dan idxal et; rootReducer'ı '.' dən idxal edin; ';
const createStore = () => reduxCreateStore (rootReducer);
standart ixrac ({element}) => ( {element} );
Bir mağaza və bir provayder yaradın

Gatsby tətbiqimizi həm serverdə, həm də brauzerdə göstərəcəkdir. Xoşbəxtlikdən, Gatsby göstərilməsində iştirak etmək üçün istifadə edə biləcəyimiz çox çevik bir API var. Two Çəngəlləri iki sənəddən həyata keçirə bilərik: gatsby-browser.js və gatsby-ssr.js.

Bizimlə maraqlandığımız çəngələ wrapRootElement deyilir və tətbiqinizi xüsusi bir elementlə bükməyə imkan verir. Redux təminatçımıza tam olaraq ehtiyacımız var. wrapRootElement haqqında daha çox məlumat üçün sənədlərə baxın.

ReduxWrapper'ımızı watsRootElement olaraq gatsby-browser.js və gatsby-ssr.js-dən ixrac etmək istədiyimiz üçün bu sətri hər iki fayla əlavə edin:

'./src/state/ReduxWrapper' dan {default olaraq wrapRootElement} ixrac;
ReduxWrapper-i gatsby-ssr.js və gatsby-browser.js saytından ixrac edin

Tamam oldu Gatsby və Redux indi birlikdə işləyirlər! İndi bizə lazım olan yalnız testin bir yolu.

Düşünə biləcəyim ən asan yola gedək: ana səhifədəki qaranlıq rejimi yandırıb söndürməyə imkan verən bir düymə. DarkMode aktiv olduqda, düymə ağ mətnlə qaranlıq olur.

Reduxun həqiqətən işlədiyini görmək üçün sadə bir test.

Terminalda:

npm qaçışını inkişaf etdirin

Və ... qaranlıq mövzunu hərəkətə baxın!

Minimum Redux nümunəsi

Tamam, bəlkə də bu o qədər də təsirli deyildi, amma nümunə öz işini görür və əminəm ki, Gatsby tətbiqində Redux üçün daha yaxşı bir istifadə tapacaqsan.

Xülasə

Gatsby + Redux, dinamik qabiliyyətli statik veb tətbiqetmələr yaratmaq istəyirsinizsə güclü bir birləşməsidir. Layihələrim üçün də istifadə edirəm. Bu məqaləni faydalı hesab edirsinizsə, xahiş edirəm bir şərh əlavə edin və zəhmli Gatsby / Redux tətbiqetinizə keçid verin.

https://carljohan.me - Çekmece Redux üçün yaxşı istifadə vəziyyətidir