قبل از استفاده از redux ابتدا پوشه های زیر را مانند نقشه زیر در پروژه خود بسازید
├── src
│ ├── components
│ │ └── ...
│ ├── actions
│ │ └── ...
│ ├── reducers
│ │ └── ...
│ ├── store
│ │ └── ...
بعد از این که پوشه های مورد نظر را ساختیم ، redux و react-redux را از طریق کد زیر نصب میکنیم
npm i redux react-redux
حال یک فایل بنام store.js در پوشه store میسازیم و کدهای زیر را در آن قرار میدهیم دقت کنید که متد combineReducer مجموعه ای از reducer ها را در قالب یک آبجکت دریافت کرده و خروجی آن داخل متد createStore منجر به ساخت store میشود
import {createStore, combineReducers} from 'redux';
import listReducer from './../reducers/listReducer'
const reducers = {
list: listReducer
}
const store = createStore( combineReducers(reducers) );
export default store
حال داخل پوشه reducers یک فایل به نام listReducer.js ساخته و کد های زیر را داخل آن قرار میدهیم
const initialState = {
items : [
{value : 'item 1'},
{value : 'item 2'},
{value : 'item 3'},
]
}
function listReducer (state = initialState , action){
switch (action.type) {
case 'ADD_ITEM' : return Object.assign( {}, state, {
items : state.items.concat( {value : action.value} )
})
default : return state;
}
}
export default listReducer
در کد بالا initialState مقادیر اولیه کامپوننت لیست میباشد که به عنوان defaultValue برای آرگومان state تعریف شده است و داخل reducer در صورتیکه نوع اکشن ADD_ITEM ارسال شود کد مربوط به آن از طریق switch اجرا میشود
بعد از ساخت reducer مربوط کامپوننت لیست نوبت به ساخت اکشن ADD_ITEM میرسد برای این کار یک فایل به نام addItem.js داخل پوشه actions ساخته و کد های زیر را داخل آن قرار میدهیم
const addItem = value => ({
type : 'ADD_ITEM',
value : value
})
export default addItem
برای استفاده از store در فایل index.js کد های زیر را قرار میدهیم
اگر دقت کنید Provider که داخل کتابخانه react-redux است، store را در دسترس تمام کامپوننت های reactJs قرار میدهد
در پایان کار نوبت به کامپوننت List میرسد یک پوشه به نام list داخل components ساخته و یک فایل به نام list.js در آن ساخته و کد های زیر را داخل آن قرار میدهیم
در اینجا با استفاده از connect داخل کتابخانه react-redux است که state ها و dispatch ها را به کامپوننت تزریق میکند و پس از آن در قالب this.props برای کامپوننت قابل دسترسی خواهند بود