首先區別redux和react-reduex,redux是一個單獨的模組，在其他框架中也能使用，而react-redux是為react管理資料而生。 Redux 的設計思想很簡單，就兩句話。

（1）Web 應用是一個狀態機，檢視與狀態是一一對應的。

（2）所有的狀態，儲存在一個物件裡面。

redux使用：首先安裝 npm i redux 在src檔案目錄下新建一個資料夾叫redux，資料夾中新建四個檔案

constant.js 用於儲存action物件中的type型別常量，目的只有一個;方便管理的同時防止程式設計師單詞寫錯,

例如：

export const INCREMENT = 'increment
 
'
export const DECREMENT = 'decrement'

action.js該檔案專門為元件生成action物件

import {INCREMENT,DECREMENT} from './constant'
​
//同步action，就是指action的值為Object型別的一般物件
export const createIncrementAction = data => ({type:INCREMENT,data})
export const createDecrementAction = data => ({type:DECREMENT,data})
//非同步action，就是指action的值為函式,非同步action中一般都會呼叫同步action，非同步action不是必須要用的。
export const createIncrementAsyncAction = (data,time)=>{
    return (dispatch)=>{
        setTimeout(()=>{
            dispatch(createIncrementAction(data))
        },time)
    }
}

reducer.js

/* 
    1.該檔案是用於建立一個為Count元件服務的reducer，reducer的本質就是一個函式
    2.reducer函式會接到兩個引數，分別為：之前的狀態(preState)，動作物件(action)
*/
​
const initState = 10 //初始化狀態
export default function countReducer(preState=initState,action){
​
    console.log(preState,action);
    //從action物件中獲取：type、data
    const {type,data} = action
    
 
//根據type決定如何加工資料
    switch (type) {
        case 'increment': //如果是加
            return preState + data
        case 'decrement': //若果是減
            return preState - data
        default:
            return preState
    }
}

store.js 該檔案專門用於暴露一個store物件，整個應用只有一個store物件 要下載 npm i redux-thunk --save

//引入createStore，專門用於建立redux中最為核心的store物件,引入applyMiddleware中介軟體轉發
import {createStore,applyMiddleware} from 'redux'
//引入為Count元件服務的reducer
import countReducer from './reducer'
// 引入redux-thunk,用於支援非同步action
import thunk from 'redux-thunk';
//暴露store
export default createStore(countReducer,applyMiddleware(thunk));

最後在index.js檔案中引入store並設定監聽

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './redux/store'
​
ReactDOM.render(<App />,document.getElementById('root'))
​
store.subscribe(()=>{ //設定監聽，只要state改變資料頁面就會更新
    ReactDOM.render(<App/>,document.getElementById('root'))
})

如果在哪個元件中使用就在元件中引入store

// 引入store，用於獲取redux中儲存狀態
import store from '../../redux/store'
// 操作非同步資料 引入相應的action函式
import {createIncrementAsyncAction} from '../../redux/action'
​
​
 increment = ()=>{ //同步函式的呼叫
       const {value} = this.selectNumber
       store.dispatch({type:'increment',data:value*1})
    }
 incrementAsync = ()=> {//非同步函式的呼叫
       const {value} = this.selectNumber;
        store.dispatch(createIncrementAsyncAction(value*1,500))
    }
  
    <h1>當前求和為：{store.getState()}</h1>//獲取store中的返回值