一、引入文件

安裝redux
cnpm install redux --save

安裝react_redux
npm install react_redux —save

二、項目目錄src文件夾下新建store文件夾（src/store/index.js）
index.js文件內容：

import { createStore } from 'redux'
import reducer from './reducer'

const store = createStore(reducer)

export default store

三、store文件夾路徑下新建reducer.js文件（src/store/reducer.js）
reducer就是根據action來對state進行操作(文件中沒有將action聲明為常量，也可以建立一個constants.js文件，將方法名聲明為常量)

const defaultState = {
  inputValue: '',
  list: []
}

export default (state=defaultState, action)=>{

  if(action.type === 'inputVlueChange'){
    const newState = JSON.parse(JSON.stringify(state))
    newState.inputValue = action.value
    return newState
  }
  
  if(action.type === 'addListData'){
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.push(state.inputValue)
    newState.inputValue = ''
    return newState
  }

  if(action.type === 'deleateItem'){
    const newState = JSON.parse(JSON.stringify(state))
    newState.list.splice(action.value, 1)
    return newState
  }

  return state
}

四、react-redux中Provider的使用
1、在項目入口index.js文件中，引入Provider和上面創建的store，同時引入組件;
2、將需要使用store的組件包裹在Provider中，只有包裹Provider后才能傳遞reducer中的數據和action

import React from 'react';
import ReactDOM from 'react-dom';

import TodoList from './TodoList'
import { Provider } from 'react-redux'
import store from './store/index'

const App = (
  <Provider store={store}>
    <TodoList />
  </Provider>
)

ReactDOM.render(
  App
  ,
  document.getElementById('root')
);

五、react-redux中connect的使用
在組件TodoList中引入connect

import React from 'react';
import {connect} from 'react-redux'

// 無狀態組件
const TodoList = (props)=>{
  let { inputValue, inputChange, addListData, deleateItem} = props
  return (
    <div>
      <div>
        <input placeholder='請輸入內容' 
               value={inputValue} 
               onChange={inputChange}/>
        <button onClick={addListData}>提交</button>
      </div>
      <ul>
        {
          props.list.map((item, index) => {
            return (
              <li key={index} onClick={()=>deleateItem(index)}>{item}</li>
            )
          })
        }
      </ul>
    </div>
  );
}

const stateToProps = (state)=>{
  return{
    inputValue: state.inputValue,
    list: state.list
  }
}

const dispatchToProps = (dispatch)=>{
  return {
    inputChange(e){
      const action = {
        type: 'inputVlueChange',
        value: e.target.value
      }
      dispatch(action);
    },

    addListData(){
      const action = {
        type: 'addListData',
      }
      dispatch(action);
    },

    deleateItem(index){
      const action = {
        type: 'deleateItem',
        value: index
      }
      dispatch(action);
    }
  }
}

export default connect(stateToProps, dispatchToProps)(TodoList);

connect中兩個參數
stateToProps：將store中的數據作為props綁定到組件上；
dispatchToProps：將store中的action作為props綁定到組件上。
如上使用connect函數連接后，在組件TodoList中的props中就可以使用store中的數據inputValue和方法inputVlueChange等等