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

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Provider} from "react-redux";
import List from './src/components/list/list';
import store from './src/store/store'


render( 
  <Provider store={store}>
    <List />
  </Provider>, 
  document.getElementById('root')
);

اگر دقت کنید Provider که داخل کتابخانه react-redux است، store را در دسترس تمام کامپوننت های reactJs قرار میدهد
در پایان کار نوبت به کامپوننت List میرسد یک پوشه به نام list داخل components ساخته و یک فایل به نام list.js در آن ساخته و کد های زیر را داخل آن قرار میدهیم

import React , {Component, Fragment} from 'react';
import { connect } from 'react-redux';
import addItem from './../../actions/addItem'

const mapStateToProps = state =>({
     items : state.list.items
})

const mapDispatchToProps = dispatch => ({
    addItem : function(value) {
      return dispatch(addItem(value))
    },
})

class List extends Component {
  constructor (props){
    super(props)
  }
  addItem (e) {
    if (e.keyCode == 13) {
      debugger
      this.props.addItem(e.target.value)
    }
  }
  render (){
    const list = this.props.items.map((item, i) => {
      return ( </p>
<li key={i}> {item.value} </li>
<p> )
    })
    return (
      <Fragment>
        <input onKeyUp={this.addItem.bind(this)} />
        </p>
<ul>{list}</ul>
<p>
      </Fragment>
    )
  }
}
export default connect (mapStateToProps, mapDispatchToProps)(List)

در اینجا با استفاده از connect داخل کتابخانه react-redux است که state ها و dispatch ها را به کامپوننت تزریق میکند و پس از آن در قالب this.props برای کامپوننت قابل دسترسی خواهند بود