Redux（一）：基本用法

一、介紹

爲了有更好的state管理，就須要一個庫來做爲更專業的頂層state分發給全部React應用，這就是Redux。

Redux 用來確保state變化的可預測性，主要的約束有：

一、state以單一對象存儲在store對象中

二、state只讀

三、使用純函數reducer 執行state更新

state爲單一對象，Redux只須要維護一棵狀態樹，服務端很容易初始化狀態，易於服務器渲染。state經過dispatch（action）來觸發更新，更新邏輯由reducer執行。

Redux的三個基本概念：Action、Reducer、Store

一、action 是純聲明式的數據結構，能夠理解爲應用向store傳遞的數據信息。

export const getUserDataDone = userData => ({
  payload: userData,
  type: GET_USERINFO_SUCCESS,
});複製代碼

二、reducer 是一個純函數，(previousState, action) => newState。根據相關action的數據進行邏輯處理，修改store中的狀態。

三、store

store是一個單一對象：

• 管理應用的state
  
• 經過 store.getState()能夠獲取state
  
• 經過store.dispatch(action)觸發state更新
  
• 經過store.subscribe(listener) 註冊監聽器
  

產生一個 Store:

import { createStore } from 'redux'

//這裏的 Reducer 就是剛纔的 Reducer 函數
let store = createStore(Reducer);

複製代碼

經過 dispatch 一個 action 來讓它改變狀態

store.dispatch( changeText() );

store.getState(); // { text : 'Hello Stark' }複製代碼

Redux 和 React 是沒有必然關係的，Redux 用於管理 state，與具體的 View 框架無關。不過，Redux 特別適合那些 state => UI 的框架（好比：React, Deku）。

可使用 react-redux 來綁定 React.

一、首先在最外層容器中，全部內容包裹在Provider組件中，將以前建立的store做爲prop 傳給Provider。

return Component => (
      <Provider store={store}>{Component}</Provider>
  );複製代碼

二、connect是重點，接受兩個參數（數據綁定mapStateToProps和事件綁定mapDispatchToProps），再接受一個參數（要綁定的組建自己）。

mapStateToProps：構建好Redux系統的時候，會被自動初始化，可是你的React組件並不知道它的存在，所以你須要分揀出你須要的Redux狀態，因此你須要綁定一個函數，它的參數是state，簡單返回你關心的幾個值。將state做爲props綁定到組件上。

const mapStateToProps = (state, ownProps) => {
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}
複製代碼

mapDispatchToProps是可選的：將 action 做爲 props 綁定到組件上。若是不傳這個參數redux會簡單把dispatch做爲屬性注入給組件，能夠手動當作store.dispatch使用。

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    increase: (...args) => dispatch(actions.increase(...args)),
    decrease: (...args) => dispatch(actions.decrease(...args))
  }
}複製代碼

參考：

https://www.zhihu.com/question/41312576?sort=created

http://www.imweb.io/topic/5a426d32a192c3b460fce354