روش کار استفاده از redux در react

روش کار استفاده از redux در react نوشته شده در   react ۱۴ آبان , ۱۳۹۷ توسط  عباس حسینی

قبل از استفاده از 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 برای کامپوننت قابل دسترسی خواهند بود