「Redux」概念理解+實戰上手（內含大量實例）

時間 2021-05-07

標籤前端 vue react vuex redux 緩存性能優化微信 ide 函數欄目 React 简体版

原文原文鏈接

前言

這篇文章零基礎也能夠看，我儘可能寫得簡單易懂了，若是以爲理解起來有點費力，也能夠先去官網入門。前端

這篇文章也附上了許多實戰代碼，可是因爲篇幅緣由，一些實戰例子我沒有直接擺出來，而是放在了sandBox連接裏，除了慢優勢仍是不少的。vue

本篇文章由小獅子團隊發佈，微信公衆號：小獅子前端，歡迎你們的關注，關注即有福利~

1、Redux因何產生？

首先說它爲何出現react

1.趨勢所致： JavaScript 單頁應用開發日趨複雜，JavaScript 須要管理比任什麼時候候都要多的 state （狀態）。vuex

2.管理不斷變化的 state 很是困難：若是一個 model 的變化會引發另外一個 model 變化，那麼當 view 變化時，就可能引發對應 model 以及另外一個 model 的變化，依次地，可能會引發另外一個 view 的變化。state 在何時，因爲什麼緣由，如何變化已然不受控制。redux

2、Redux是幹什麼的？

說到底它也只是個工具，瞭解一個工具最開始固然是要了解它是作啥的咯。緩存

官網對它的定義：Redux 是 JavaScript 狀態容器，提供可預測化的狀態管理。性能優化

詳細一些：微信

Redux會將整個應用狀態(其實也就是數據)存儲到Store
Store裏面保存一棵狀態樹(state tree)
組件改變state的惟一方法是經過調用store的dispatch方法，觸發一個action，這個action被對應的reducer處理，因而state完成更新
組件能夠派發(dispatch)行爲(action)給store,而不是直接通知其它組件
其它組件能夠經過訂閱store中的狀態(state)來刷新本身的視圖

能夠結合這張圖看：ide

3、Redux怎麼用？

官網實例（todo）

State: 用了一個普通對象描述應用中的State，沒有setter（修改器方法）函數

{
  todos: [{
    text: 'Eat food',
    completed: true
  }, {
    text: 'Exercise',
    completed: false
  }],
  visibilityFilter: 'SHOW_COMPLETED'
}

Action： 想更新state中的數據，例如增長todo，須要發起一個action。Action就是一個普通的JavaScript對象,描述發生了什麼的指示器

{ type: 'ADD_TODO', text: 'Go to swimming pool' }
{ type: 'TOGGLE_TODO', index: 1 }
{ type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }

強制使用 action 來描述全部變化帶來的好處是能夠清晰地知道應用中到底發生了什麼。若是一些東西改變了，就能夠知道爲何變。

Reducer: 把 action 和 state 串起來，reducer 只是一個接收 state 和 action，並返回新的 state 的函數。

//編寫不少小函數來分別管理 state 的一部分
function visibilityFilter(state = 'SHOW_ALL', action) {
  if (action.type === 'SET_VISIBILITY_FILTER') {
    return action.filter;
  } else {
    return state;
  }
}

function todos(state = [], action) {
  switch (action.type) {
  case 'ADD_TODO':
    return state.concat([{ text: action.text, completed: false }]);
  case 'TOGGLE_TODO':
    return state.map((todo, index) =>
      action.index === index ?
        { text: todo.text, completed: !todo.completed } :
        todo
   )
  default:
    return state;
  }
}

``````
//reducer 調用上兩個 reducer，進而管理整個應用的 state
function todoApp(state = {}, action) {
  return {
    todos: todos(state.todos, action),
    visibilityFilter: visibilityFilter(state.visibilityFilter, action)
  };
}

手寫實戰（TodoList）

感興趣的能夠看一下codesandbox-TodoList例子可能會比較慢。

沒有用過sandbox的，我展現一下大概長這樣：

我的以爲這樣比較直觀一些，因此後面有的仍是貼的連接～
todo這種例子仍是比較簡單的，至關於入門，理解Redux工做。

4、react-redux

能夠看到上面咱們並無使用到react-redux，雖然能實現功能，但細心會發現我是直接拿的store，組件多的話個個拿store，這樣很差。我來總結一下不用react-redux可能會遇到頭痛的問題好比：

1.store並非那麼顯而易見，一旦組件層級變得更復雜，這個store就會變得很難控制。

2.邏輯組件看上去很亂，不清晰的緣由state和dispatch沒有各自寫在一塊兒，重複代碼有點多，不直觀。

3.React 組件從 Redux store 中讀取數據，向 store 中分發 actions 更新數據還不夠方便。

Provider

這個仍是很好理解的，就是把store直接集成到React應用的頂層props裏面Provider是把store注入到context，connect纔是吧context轉換成props，好處是，全部組件均可以在react-redux的控制之下，全部組件都能訪問到Redux中的數據。

<Provider store={store}>
    <App />
 </Provider>,

connect

技術上講，容器組件就是使用store.subscribe() 從 Redux state 樹中讀取部分數據，並經過 props 來把這些數據提供給要渲染的組件。
爲啥要用它，簡單來講節省工做，沒有他得手工開發容器組件，併爲了性能而手動實現 React 性能優化建議中的 shouldComponentUpdate 方法。
使用 React Redux 庫的 connect() 方法來生成，這個方法作了性能優化來避免不少沒必要要的重複渲染。

connect的使用

代碼以下：

const App = connect(mapStateToProps, mapDispatchToProps)(Counter);
export default App;

mapStateToProps

理解這個單詞mapStateToProps：把state映射到props中去，state就是redux的state啦，props就是react的props咯。

代碼：

// Map Redux state to component props
function mapStateToProps(state) {
  return {
    value: state.count
  }
}

而後在組件中使用this.props.value就能完成渲染

class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props;
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>
    );
  }
}
export default Counter;

mapDispatchToProps

理解這個單詞mapDispatchToProps：map 各類dispatch 變成props。

// Map Redux actions to component props
 function mapDispatchToProps(dispatch) {
   return {
     onIncreaseClick: () => dispatch(increaseAction)
   }
 }

``````
class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props;
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>
    );
  }
}
export default Counter;

同理也是能夠經過this.props.onIncreaseClick調用dispatch，這樣就不須要在代碼中運行dispatch了。

connect、provider應用實例

看了上面的介紹，應該能比較清楚的瞭解connect是幹什麼的了，而後也基本能明白怎麼作了，但仍是沒有寫哥實例更清楚直白的了：

簡單的點擊增長count的實例，應該還有許多須要優化的地方，這裏就學明白connect和provider就行了。

複雜一點的todolist的實例這裏用了hooks、connect、provider沒有用react-redux裏的hooks鉤子（若是有看不懂的話能夠學學hooks或者等我有時間再出一個class改寫成hooks的文章，仍是很簡單的，只要你專心學）

5、Hooks下的redux

若是項目開發是用的hooks，那很好，你又省了許多力氣，好比計數器這個這種簡單的狀態管理例子，幾行代碼解決。

import { useState } from 'react';
function Example() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

可是咱們能徹底不用redux狀態管理了嘛？哈哈哈怎麼可能呢

對於已經使用redux的：首先在redux沒有給出對hooks較好支持以前，大多不會爲了hooks來徹底重構項目吧，順便一講重構可能形成的問題：
- 失去不少connect()提供的自動引用緩存，可能致使性能問題，除非用大量的useCallback()來包裹
- 若是代碼依賴於mapStateToProps中的ownProps，那麼你可能會使用redux hooks編寫更多代碼，而不能直接拿到這個屬性。
- 不能像之前那樣在mapDispatchToProps中，爲action creator提供依賴注入
對於有多是複雜應用的：許多公司的項目大部分都是用的redux管理狀態，他的許多優勢好比單一數據源、數據共享、事務狀態、數據狀態I/O和反作用隔離、狀態回溯以及一系列輔助工具帶來的強大調試能力等等，使得用redux來管理數據流成爲更好的選擇。
react-redux發佈了新的版本，與以前的contextAPI分離，提供對hooks的支持，那這不就更香了

新的redux帶來的改變

再也不須要使用 mapStateToProps，mapDispatchToProps和connect來維護單獨的container組件和UI組件，而是在組件中直接使用redux提供的hooks,讀取redux中的state。
能夠將任何現有的自定義hooks與redux集成，而不是將經過hooks建立的state，做爲參數傳遞給其餘hooks。

redux對hooks的支持

首先介紹幾個核心：

useSelector： 用於從Redux存儲的state中提取值並訂閱該state。
useDispatch： 除了讀取store中的state，還能dispatch actions更新store中的state。
useStore： 用於獲取建立的store實例。

光看簡介還不是很清楚，一個個來講：

useSelector

看它的介紹，就很像mapStateToProps，可是

不提供ownProps API，最好用useCallback或useMemo來獲取
和useEffect同樣，若是不提供第二個參數，每次組件更新就會從新計算

那可能會存在一些擔心，會不會新的沒有以前用的mapStateToProps好用呢？那來看看他的一些好處吧：

固然是配合hooks寫代碼更簡潔
性能上延續redux之前的性能優化邏輯，比較props，若是當前的props跟老的props相同，則組件將不會從新渲染。
批處理更新，使得多個useSelector()從新計算出state，組件只會從新渲染一次，不用擔憂useSelector重複渲染問題。

首先看看之前是怎麼寫的：

//before

// React component
class Counter extends Component {
  render() {
    const { value, onIncreaseClick } = this.props;
    return (
      <div>
        <span>{value}</span>
        <button onClick={onIncreaseClick}>Increase</button>
      </div>
    );
  }
}
export default Counter;

// Connected Component
// Map Redux state to component props
function mapStateToProps(state) {return {value: state.count}}
// Map Redux actions to component props
function mapDispatchToProps(dispatch) {return {onIncreaseClick: () => dispatch(increaseAction)}}

// Connected Component
const App = connect(mapStateToProps,mapDispatchToProps)(Counter)
export default App

而後讓咱們用新的useSelect改寫以前寫得計數器：

//after
const Counter = props=> {
  const { count } = useSelector(
    (state) => ({
      count: state.count
    })
  );
  return (
    <div>
      <span>{count}</span>
    </div>
  );
}
export default Counter;

useDispatch

以前是使用mapDispatchToProps：

//before
// Map Redux actions to component props
  function mapDispatchToProps(dispatch) {
    return {
      onIncreaseClick: () => dispatch(increaseAction)
    }
  }

如今使用useDispatch，能夠直接在組件中使用，以匿名函數形式：

//after
const dispatch = useDispatch();
return (
    <div>
      <button onClick={()=>dispatch(increaseAction)}>Increase</button>
    </div>
  );

因爲匿名函數的性質，每次從新渲染得到新的引用，若是做爲props傳遞給子組件，那麼子組件每次都要從新渲染。

優化的意見是在useCallback中建立這個匿名函數：

//after
import React, { useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import increaseAction from "./store/action";
const Counter = props=> {
  const { count } = useSelector(
    (state) => ({
      count: state.count
    })
  );
  const dispatch = useDispatch();
  const onIncreaseClick = useCallback(
    () => dispatch(increaseAction),[dispatch]
  );
  return (
    <div>
      <span>{count}</span>
      <button onClick={onIncreaseClick}>Increase</button>
    </div>
  );
}
export default Counter;

useStore

在任何須要訪問store的應用中，均可以經過usestore來獲取。若是出於某種緣由，好比說單元測試時，想要獲取不一樣的store，咱們能夠將store經過新的contextAPI傳遞進組件樹中，就像下面這樣：

import React from 'react';
import { useStore } from 'react-redux';
import OtherProvider from './OtherProvider';

const Component = props => {
  const store = useStore();
  return <OtherProvider store={store}>{props.children}</OtherProvider>
}