Redux 出現(xiàn)的背景

隨著對(duì) React 使用的深入，你會(huì)發(fā)現(xiàn)組件級(jí)別的 state，和從上而下傳遞的 props 這兩個(gè)狀態(tài)機(jī)制，無法滿足復(fù)雜功能的需要，例如跨層級(jí)之間的組件的數(shù)據(jù)共享和傳遞，Redux應(yīng)運(yùn)而生。

state應(yīng)用 & redux應(yīng)用對(duì)比

從這張對(duì)比圖，我們可以看到 Redux Store 的兩個(gè)特點(diǎn)：

• Redux Store 是全局唯一的。即整個(gè)應(yīng)用程序一般只有一個(gè) Store。
• Redux Store 是樹狀結(jié)構(gòu)，可以更天然地映射到組件樹的結(jié)構(gòu)，雖然不是必須的。

有兩個(gè)場(chǎng)景可以典型地體現(xiàn)出這些特點(diǎn)：

• 跨組件的狀態(tài)共享：當(dāng)某個(gè)組件發(fā)起一個(gè)請(qǐng)求時(shí)，將某個(gè) Loading 的數(shù)據(jù)狀態(tài)設(shè)為 True，另一個(gè)全局狀態(tài)組件則顯示 Loading 的狀態(tài)。
• 同組件多個(gè)實(shí)例的狀態(tài)共享：某個(gè)頁面組件初次加載時(shí)，會(huì)發(fā)送請(qǐng)求拿回了一個(gè)數(shù)據(jù)，切換到另外一個(gè)頁面后又返回，這時(shí)數(shù)據(jù)已經(jīng)存在，無需重新加載。設(shè)想如果是本地的組件 state，那么組件銷毀后重新創(chuàng)建，state 也會(huì)被重置，就還需要重新獲取數(shù)據(jù)。

Redux的三個(gè)基本概念

Redux 主要引入了以下三個(gè)概念：

• State: State 即 Store，一般就是一個(gè)純 JavaScript Object。
• Action: 是一個(gè) Object，用于描述發(fā)生的動(dòng)作。
• Reducer: 是一個(gè)函數(shù)，接收 Action 和 State 并作為參數(shù)，通過計(jì)算得到新的 Store (每次返回一個(gè)新的對(duì)象)

state & action & reducer之間的關(guān)系

• 可預(yù)測(cè)性 - 給定一個(gè)初始狀態(tài)和一系列Action，一定能得到一致的結(jié)果。
• 易于調(diào)試 - 基于瀏覽器插件的開發(fā)工具可以跟蹤 Store 中數(shù)據(jù)的變化并進(jìn)行暫停、回放。

如何在React中使用Redux: react-redux

在實(shí)際場(chǎng)景中，Redux Store 中的狀態(tài)最終一定是會(huì)體現(xiàn)在 UI 上的，即通過 React 組件展示給用戶。那么如何建立 Redux 和 React 的聯(lián)系呢？

• React 組件能夠在依賴的 Store 的數(shù)據(jù)發(fā)生變化時(shí)，重新 Render；
• 在 React 組件中，能夠在某些時(shí)機(jī)去 dispatch 一個(gè) action，從而觸發(fā) Store 的更新。

Facebook 提供的 react-redux 工具庫，作用就是建立一個(gè)橋梁，讓 React 和 Redux 實(shí)現(xiàn)互通。

• 利用了 React 的 Context 機(jī)制去存放 Store 的信息。

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

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

import App from './App'

const rootElement = document.getElementById('root')
ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

Provider 組件作為整個(gè)應(yīng)用程序的根節(jié)點(diǎn)，并將 Store 作為屬性傳給了這個(gè)組件，這樣所有下層的組件就都能夠使用 Redux 了。

在函數(shù)組件中使用 Redux 就非常簡單了：
利用 react-redux 提供的 useSelector 和 useDispatch 這兩個(gè) Hooks。

• useSelector 讓一個(gè)組件能夠在 Store 的某些數(shù)據(jù)發(fā)生變化時(shí)重新 render。
• useDispatch 返回 dispatch，讓組件能夠 dispatch 一些 action 從而修改Store

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'

export function Counter() {
  // 從 state 中獲取當(dāng)前的計(jì)數(shù)值
  const count = useSelector(state => state.value)

  // 獲得當(dāng)前 store 的 dispatch 方法
  const dispatch = useDispatch()

  // 在按鈕的 click 時(shí)間中去分發(fā) action 來修改 store
  return (
    <div>
      <button
        onClick={() => dispatch({ type: 'counter/incremented' })}
      >+</button>
      <span>{count}</span>
      <button
        onClick={() => dispatch({ type: 'counter/decremented' })}
      >-</button>
    </div>
  )
}

react-redux的單向數(shù)據(jù)流

使用Redux處理異步邏輯

處理異步邏輯也常常被稱為異步 Action，它幾乎是 React 面試中必問的一道題，可以認(rèn)為這是 Redux 使用的進(jìn)階場(chǎng)景。

只有能夠解釋清楚異步 Action，才算是真正理解了 Redux

例：異步場(chǎng)景-發(fā)送請(qǐng)求獲取數(shù)據(jù)

不推薦：在函數(shù)組件中發(fā)送請(qǐng)求 - Store 完全作為一個(gè)存放數(shù)據(jù)的地方

function DataList() {
const dispatch = useDispatch();
// 在組件初次加載時(shí)發(fā)起請(qǐng)求
useEffect(() => {
  // 請(qǐng)求發(fā)送時(shí)
  dispatch({ type: 'FETCH_DATA_BEGIN' });
  fetch('/some-url').then(res => {
    // 請(qǐng)求成功時(shí)
    dispatch({ type: 'FETCH_DATA_SUCCESS', data: res });
  }).catch(err => {
    // 請(qǐng)求失敗時(shí)
    dispatch({ type: 'FETCH_DATA_FAILURE', error: err });
  })
}, []);

// 綁定到 state 的變化
const data = useSelector(state => state.data);
const pending = useSelector(state => state.pending);
const error = useSelector(state => state.error);

// 根據(jù) state 顯示不同的狀態(tài)
if (error) return 'Error.';
if (pending) return 'Loading...';
return <Table data={data} />;
}

很顯然，發(fā)送請(qǐng)求獲取數(shù)據(jù)并進(jìn)行錯(cuò)誤處理這個(gè)邏輯是不可重用的。假設(shè)我們希望在另外一個(gè)組件中也能發(fā)送同樣的請(qǐng)求，就不得不將這段代碼重新實(shí)現(xiàn)一遍。因此，Redux 中提供了 middleware 這樣一個(gè)機(jī)制，讓我們可以巧妙地實(shí)現(xiàn)所謂異步 Action 的概念。

推薦：使用 middlewate - dispatch 一個(gè)函數(shù)用于發(fā)送請(qǐng)求

• 在創(chuàng)建 redux store時(shí)指定 redux-thunk 中間件

  import { createStore, applyMiddleware } from 'redux'
  import thunkMiddleware from 'redux-thunk'
  import rootReducer from './reducer'
  
  const composedEnhancer = applyMiddleware(thunkMiddleware)
  const store = createStore(rootReducer, composedEnhancer)
  

• 在 dispatch action 時(shí)dispatch一個(gè)函數(shù)

  import fetchData from './fetchData';
  
  function DataList() {
    const dispatch = useDispatch();
    // dispatch 了一個(gè)函數(shù)由 redux-thunk 中間件去執(zhí)行
    dispatch(fetchData());
  }
  

• fetchData定義

  function fetchData() {
    return dispatch => {
      dispatch({ type: 'FETCH_DATA_BEGIN' });
      fetch('/some-url').then(res => {
        dispatch({ type: 'FETCH_DATA_SUCCESS', data: res });
      }).catch(err => {
        dispatch({ type: 'FETCH_DATA_FAILURE', error: err });
      })
    }
  }
  

這一套結(jié)合 redux-thunk 中間件的機(jī)制，我們就稱之為異步 Action。

所以說異步 Action 并不是一個(gè)具體的概念，而可以把它看作是 Redux 的一個(gè)使用模式。它通過組合使用同步 Action ，在沒有引入新概念的同時(shí)，用一致的方式提供了處理異步邏輯的方案。