單純的react只是一個檢視層框架，寫專案是還需要資料管理工具redux；

安裝使用

npm install --save redux

英文好的看githup https://github.com/reduxjs/redux；

src目錄下建立資料夾store

新建 index.js 和 reducer.js

index.js

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

const store = createStore(reducer);

export default
 
 store;

createStore 建立Store的api

reducer.js

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

export default (state = defaultState) => {
    return state;
}

初始的store 中state的初始值

reducer是一個純函式（給定固定的輸入值，就會有一定的輸出，且無任何副作用）；
reducer的作用就是返回給 store 一個資訊 讓store修改資料

在元件中獲得store資料

在reduce中初始值
const defaultState = {
inputValue: '123',
list: [1, 2, 3]
}

在元件中獲取資料

import Store from './store'

使用store提供的getState()方法獲取資料

渲染 展示

元件中修改store中資料

輸入框繫結方法

  handleInputChange(e) {
    const val = e.target.value;
    const action = {
      type: 'change_input_value',
 

      value: val
    }
    Store.dispatch(action)
  }

建立 action
通過store提供的dispatch()方法，將元件定義action反應給Store，Store查詢reducer

reducer接收action 根據action.type做出反應
因為Sotre是唯一的，且只有store自己可以改變自己的內容 所以在 reducer裡對state做了一次copy

const newstate = JSON.parse(JSON.stringify(state));

可以看到store資料已經改變了 但是元件的資料沒有重新整理
store提供了subscribe()來重新整理元件資料

定義方法

 handleStoreChange() {
        this.setState(Store.getState())
    }

在constructor中新增

Store.subscribe(this.handleStoreChange)

這樣元件就資料就重新整理了

至此store常用的4個方法就全部使用了
createStore()： 建立store
getState()：元件獲取store中的資料
dispatch()：元件傳遞資訊給store（store在傳遞給reducer，reducer返回資訊給store；store做出改變）
subscribe()：元件根據store更新資料

actionCreator和actionTypes
在store資料夾下建立 actionCreator.js&actionTypes

actionTypes.js

actionCreator.js

相應的reducer和元件也做改變

這樣寫的好處是便於管理，出錯了也會log出來。。。

再說說著這
元件要更新資料 呼叫actionCreater方法 dispatch給store， store 傳給reducer ，reducer做出反應， store改變，通過subscribe給元件資料

redux中介軟體
react專案中的中介軟體一般都是redux的中介軟體。。。不是react本身的中介軟體；

這裡中介軟體都是action與reducer之間的

redux-thunk

安裝

npm install --save redux-thunk

使用

因為還要相容redux在chrome的外掛 所以麻煩點

這是不使用中介軟體請求模擬資料
用Charles 模擬的

使用thunk
直接在actionCreator中進行資料請求

在元件中

直接調取在actionCreator中定義的getdatalist方法 然後dispatch就可以了

redux-thunk簡單的解釋就是讓actioncreator的方法中不僅僅可以返回一個物件 還可以是一個函式，如果是物件的話會直接丟給store在到reducer中做處理，如果是函式的話就會先執行函式再丟給store到reducer中做處理；

redux-saga

安裝

 npm install redux-sage --save

在store下建立sagas.js

在store index.js下引用saga

記得sagaMIddleware.run（sagas）哦

在元件中請求模擬的資料

使用redux-sage
在actioncreator 新建一個方法

在元件中呼叫

這裡不僅僅是reducer可以接受到這個dispatch這個action， 在saga也可以

在

function* mySaga() {
    yield takeEvery(GET_INIT_DATA_INIT, getInitdata);
}

呼叫saga中 takeEvery（）方法。 接收2個引數第一個是ation.type 另一個是接收到後呼叫generator函式名

通過

 const res = yield axios.get('/api/todolist')
 const action = initData(res.data)

得到請求資料 新建action
呼叫saga中 put函式將這個action 發給stroe給reducer做處理

redux-saga 簡單的來說攔截元件dispatch出的action 判斷action的type的來做出新的反應生成新的 action 返回給store

saga用的都是generator函式 比較不適應。。。提供的api也很多。。。
適合大專案使用。。。。。。。。小專案安心使用redux-thunk吧 簡單。。。

react-redux

安裝

npm install react-redux --save

使用

在專案的index.js 引用

使用react-redux 中Provider元件 包住使用store的元件 再把store 引入並使用
provider 就是連結store的一個提供器 讓其內部的元件都可以獲取store

在元件中使用react-redux提供的api connect（）

export default connect(mapStateToProps, mapDispatchToProps)(TodoList);

connect（fuc1: store和元件的關聯， fuc2：對store資料修改的方法和dispacth關聯）（元件名）

這樣簡單的吧這個元件轉為無狀態元件

搞定 react的一般基礎就到這了 實戰吧乾巴爹