[譯]如何結合React Hooks來使用Redux

本文做者：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團隊關注咱們。