本文作者：IMWeb IMWeb團隊 原文出處：IMWeb社群 未經同意，禁止轉載

原文地址：itnext.io/how-to-use-…

React-redux 釋出了 7.1.0 版本的 hooks 。 這意味著我們可以使用 React 的最新最佳實踐。

Hooks 讓我們為相同的功能編寫更少的程式碼。我們需要編寫的程式碼越少，我們就可以越快地啟動應用程式。

簡單的 Redux 元件

這是一個非常基本和傳統的 Redux 連線元件。您會如何使用 Hooks 來重構它?

import React, { Component } from "react";
import { connect } from "react-redux";
import { toggleSwitch } from "./UiReducer";

class Toggle extends Component {
  render() {
    const { ui, toggleSwitch } = this.props;
    return (
      <div>
        <div>{JSON.stringify(ui)}</div>
        <input
          type="checkbox"
          value={ui.toggle}
          onChange={toggleSwitch}
        />
      </div>
    );
  }
}

const mapStateToProps = ({ ui }) => ({
  ui
});

export default connect(
  mapStateToProps,
  { toggleSwitch }
)(Toggle);
複製程式碼

上面是一個切換核取方塊的簡單元件。 為了簡單起見，我們只有一個狀態，toggle 是一個布林值。

用Redux切換核取方塊

如果您對 hooks 有一定的瞭解，那麼您可能知道 hooks 需要在函式元件中使用。您不能在 React 類中使用 hooks。

第1步 - 將類元件重構為函式元件

將 React 元件從類轉換到函式元件是相當簡單的。 我們要做的就是

import React from "react";
import { connect } from "react-redux";
import { toggleSwitch } from "./UiReducer";

const Toggle = ({ ui, toggleSwitch }) => (
  <div>
    <div>{JSON.stringify(ui)}</div>
    <input type="checkbox" value={ui.toggle} onChange={toggleSwitch} />
  </div>
);

const mapStateToProps = ({ ui }) => ({
  ui
});

export default connect(
  mapStateToProps,
  { toggleSwitch }
)(Toggle);
複製程式碼

注意：這個程式碼比之前的已經短了很多。我們將類語法替換為更簡單的函式語法。我們還從箭頭函式引數 props 中解構了 ui 和 toggleSwitch屬性。 可以肯定的是，切換仍然按預期工作。

Hooks 通常使用 use 關鍵字作字首，比如 useState 或 useSelecor。

我們目前從 store 讀取狀態的方法是通過 mapStateToProps 並將函式元件封裝在 connect HOC中。

第2步 - useSelector

讓我們從使用 hooks 讀取狀態開始。我們需要從 react-redux 包中匯入 useSelector。使用 useSelector hook，我們可以讀取我們的狀態。

import React from "react";
import { connect, useSelector } from "react-redux";
import { toggleSwitch } from "./UiReducer";

const Toggle = ({ toggleSwitch }) => {
  const ui = useSelector(state => state.ui);
  return (
    <div>
      <div>{JSON.stringify(ui)}</div>
      <input type="checkbox" value={ui.toggle} onChange={toggleSwitch} />
    </div>
  );
};

export default connect(
  null,
  { toggleSwitch }
)(Toggle);
複製程式碼

注意：我們刪除了 ui 引數，並使用 useSelector hook。useSelector 的第一個引數是儲存的狀態。

第3步 - useDispatch

useDispatch hook 讓我們執行 redux 操作。 我們從 react-redux 包匯入 useDispatch hook。

使用 useDispatch 相對簡單，我們將 hook 例項儲存在一個變數下。我們可以在任何事件監聽器中呼叫 dispatch 函式。

import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { TOGGLE } from "./UiReducer";

const Toggle = () => {
  const ui = useSelector(state => state.ui);
  const dispatch = useDispatch();
  return (
    <div>
      <div>{JSON.stringify(ui)}</div>
      <input
        type="checkbox"
        value={ui.toggle}
        onChange={() => dispatch({ type: TOGGLE })}
      />
    </div>
  );
};

export default Toggle;
複製程式碼

注意：我們在這裡呼叫 dispatch 函式時使用型別常量 TOGGLE，我們在 Redux 常量中定義了這個型別並將其匯入到元件中。

export const TOGGLE = "ui/toggle";
複製程式碼

如果您想將 payload 傳遞給 dispatcher，請像往常一樣執行此操作。

dispatch({ type: TOGGLE, payload: 'My payload' })
複製程式碼

總結

恭喜！ 您成功地從類重構為使用 hooks。 為了確保一切正常工作，讓我們再測試一次 toggle。

是的，一切正常。原始碼 現在您已經瞭解了 hooks 的基礎知識並使用了 hooks 與redux ，我建議您閱讀文件以深入瞭解這些概念。

此外，我建議閱讀 Functional React: Quickstart with React Hooks, Redux and MobX 一書，深入瞭解 Redux、React 和 MobX。

關注我們

IMWeb 團隊隸屬騰訊公司，是國內最專業的前端團隊之一。

我們專注前端領域多年，負責過 QQ 資料、QQ 註冊、QQ 群等億級業務。目前聚焦於線上教育領域，精心打磨 騰訊課堂、企鵝輔導 及 ABCMouse 三大產品。

社群官網：

imweb.io/

加入我們：

careers.tencent.com/jobdesc.htm…

掃碼關注 IMWeb前端社群公眾號，獲取最新前端好文

微博、掘金、Github、知乎可搜尋 IMWeb或 IMWeb團隊關注我們。