Redux, React-Redux

Redux: JavaScript 狀態容器，提供可預測化的狀態管理

需要使用Redux 的情景：

  1. 用戶的使用方式復雜
  1. 不同身份的用戶有不同的使用方式（比如普通用戶和管理員）
  2. 多個用戶之間可以協作
  3. 與服務器大量交互，或者使用了WebSocket
  4. View要從多個來源獲取數據
  5. 某個組件的狀態，需要共享
  6. 某個狀態需要在任何地方都可以拿到
  7. 一個組件需要改變全局狀態
  8. 一個組件需要改變另一個組件的狀態

Redux設計思想：

（1）Web 應用是一個狀態機，視圖與狀態是一一對應的。
（2）所有的狀態，保存在一個對象里面。

API:

*1. Store容器：保存所有數據，整個應用只能有一個Store

const store = createStore(fn, window.STATE_FROM_SERVER); 
//接受另一個函數作為參數，生成返回新的Store對象。第二個參數通常是服務器給出，表示整個應用的初始狀態值，會覆蓋Reducer函數的默認初始值

*2. State對象：Store快照，某一時間點的數據集合，(規定State和View唯一對應，知其一就可推斷另一個)
const state = store.getState(); //拿到當前時刻的State

*3. Action對象：描述當前發生的事情，用戶改變界面后，改變State的唯一辦法，Action會運送數據到Store

const action = {
  type: 'ADD_TODO', //必須，表示Action名稱
  payload: 'learn redux'  //攜帶的信息
}

*4. Action Creator函數：生成Action，解決多個View手動生成多個Action的麻煩

const ADD_TODO = 'add TODO';
function addTodo(text) {  //Action Creator
  return {
    type: ADD_TODO,
    text
  }
}
const action = addTodo('learn');

*5. store.dispatch():View發出Action的唯一方法

import { createStore } from 'redux';
const store = createStore(fn);
store.dispatch({  //將Action對象作為參數發送出去
  type: 'ADD_TODO',
  payload: 'learn'
}); //可以是: store.dispatch(action);結合Action Creator

*6. Reducer函數：Store 收到Action后，須給出新的State來改變View，新State 的計算過程就是Reducer

const defaultState = 0;
const reducer = (state = defaultState, action) => { //接受舊State和收到的antion作為參數
  switch (action.type) {
    case 'ADD':
      return state + action.payload;  //返回新的State
    default:
      return state;
  }
}
//手動調用
const state = reducer(1, action);
//自動調用
import { createStore } from 'redux';
const store = createStore(reducer); //每當store.dispatch() 發送一個新的Action ，就會自動調用 reducer()

*7. 純函數：同樣的輸入，必定得到同樣的輸出,有約束：

  • 不得改寫參數
  • 不能調用系統 I/O 的API
  • 不能調用Date.now() 或者Math.random()等不純的方法，每次會得到不一樣的結果
//保證返回的是新對象或數組，不改變之前的State，使得某個State與某個View仍然唯一對應
function reducer(state, action) {
  return Object.assign({}, state, { change });  // or return {...state, ...newState},State是對象

  return [...state, newItem]; //State是數組
}

*8. store.subscribe(): 監聽State的變化
store.subscribe(listener); //listener可以是React的render(), setState()方法，即可實現View 的自動渲染
let unsubscribe = store.subscribe(listener);unsubscribe();//即可解除監聽

*9. combineReducers(): 合并子Reducer()成一個大的函數

/*
 *假設：三種Action 分別改變State 的三個屬性
 *- ADD_C：c屬性
 *- CHANGE_S：s屬性
 *- CHANGE_U：u屬性
 */
const chatReducers = (state = defaultState, action = {}) => {  //為了避免龐大的State導致復雜的Reducer，所以Reducer的拆分
  return {  //各個子Reducer 函數均是自定義
    c: c(state.c, action),
    s: s(state.s, action),
    u: u(state.u, action)
  }
}
/*前提：State 屬性名必須與子 Reducer 同名*/
import { combineReducers } from 'redux';
const chatReducer = combineReducers({ //合并上面對 Reducer 的拆分
  c,
  s,
  u
})

Redux工作流程

Redux Flow

中間件（middleware）：為實現Reducer異步操作

*1. applyMiddlewares(): 將所有中間件組成一個數組，依次執行，所以加載時，需要查詢中間件的執行順序

*2. 異步操作：

//三種Action(發起時，成功時，失敗時)
// 寫法一：名稱相同，參數不同
{ type: 'FETCH_POSTS' }
{ type: 'FETCH_POSTS', status: 'error', error: 'Oops' }
{ type: 'FETCH_POSTS', status: 'success', response: { ... } }

// 寫法二：名稱不同
{ type: 'FETCH_POSTS_REQUEST' }
{ type: 'FETCH_POSTS_FAILURE', error: 'Oops' }
{ type: 'FETCH_POSTS_SUCCESS', response: { ... } }

//State三種屬性
let state = {
  isFetching: true,//是否抓取數據
  didInvalidate: true,//數據是否過時
  lastUpdated: 'xxxxxxx'//上一次更新時間
};

思路：操作開始時，送出一個 Action，觸發 State 更新為"正在操作"狀態，View 重新渲染；操作結束后，再送出一個 Action，觸發 State 更新為"操作結束"狀態，View 再一次重新渲染

*3. redux-thunk中間件：異步操作，寫出一個返回函數的 Action Creator，然后設applyMiddlewares為redux-thunk中間件改造store.dispatch，使其可接受函數參數

*4. redux-promise中間件: 異步操作，讓Action Creator 返回一個Promise對象，設applyMiddlewares為redux-promise

React-Redux: 將所有組件分成兩大類（UI組件和容器組件）

React-Redux 規定，所有的 UI 組件都由用戶提供，容器組件則是由 React-Redux 自動生成。也就是說，用戶負責視覺層，狀態管理則是全部交給它。

*1. UI組件：只負責 UI 的呈現，不帶有任何業務邏輯；沒有狀態（即不使用this.state這個變量）；所有數據都由參數（this.props）提供；不使用任何 Redux 的 API

*2. 容器組件：負責管理數據和業務邏輯，不負責 UI 的呈現；有內部狀態；使用 Redux 的 API

*3. connect(): React-Redux提供，用于從UI組件生成容器組件，兩組件建立聯系

const VisibleTodoList = connect(
  mapStateToProps,  //輸入邏輯：外部的數據（state）如何轉換為UI組件的參數
  mapDispatchToProps  //輸出邏輯：用戶發出的動作如何變為Action對象，從UI組件傳出去
  )(TodoList);//TodoList是UI組件，由此生成了容器組件

*4. mapStateToProps(): 建立一個從（外部的）state對象到（UI 組件的）props對象的映射關系

// 容器組件的代碼
//    <FilterLink filter="SHOW_ALL">
//      All
//    </FilterLink>

const mapStateToProps = (state, ownProps) => {  //參數1：state對象，參數2：容器組建的props對象
  return {
    active: ownProps.filter === state.visibilityFilter
  }
}

*5. mapDispatchToProps: 定義了哪些用戶的操作應該當作 Action，傳給 Store,可以是函數或者對象

//函數
const mapDispatchToProps = (dispatch,ownProps) => {
  return {
    onClick: () => {
      dispatch({
        type: 'SET_VISIBILITY_FILTER',
        filter: ownProps.filter
      });
    }
  };
}
//對象
const mapDispatchToProps = {
  onClick: (filter) => {
    type: 'SET_VISIBILITY_FILTER',
    filter: filter
  };
}

*6. <Provider>組件：React-Redux提供，讓容器組件拿到state

ReactDOM.render(
  <Provider store={store}>  //let store = createStore(reducer); Redux生成store對象
    <App /> //在跟組件外包一層,則其所有子組件就默認都能拿到state了
  </Provider>,
  document.getElementById('root')
)

學習自：

Redux 入門教程（一）：基本用法
Redux 入門教程（二）：中間件與異步操作
Redux 入門教程（三）：React-Redux 的用法

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容