【譯】如何結合React Hooks來使用Redux

時間 2021-01-13

標籤前端 react git github web redux api 數組 app ide 欄目 React 简体版

原文原文鏈接

本文由 IMWeb 首發於 IMWeb 社區網站 imweb.io。點擊閱讀原文查看 IMWeb 社區更多精彩文章。前端

原文地址：https://itnext.io/how-to-use-redux-with-react-hooks-5422a7ceae6ereact

React-redux(https://github.com/reduxjs/react-redux) 發佈了 7.1.0 版本的 hooks 。這意味着咱們能夠使用 React 的最新最佳實踐。git

Hooks 讓咱們爲相同的功能編寫更少的代碼。咱們須要編寫的代碼越少，咱們就能夠越快地啓動應用程序。github

簡單的 Redux 組件

這是一個很是基本和傳統的 Redux 鏈接組件。您會如何使用 Hooks 來重構它?web

import React, { Component } from "react";redux
import { connect } from "react-redux";api
import { toggleSwitch } from "./UiReducer";數組
class Toggle extends Component {app
render() {ide
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 並將函數組件封裝在 connectHOC中。

第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 包導入 useDispatchhook。

使用 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。

是的，一切正常。源碼(https://codesandbox.io/s/react-redux-hook-by-indrek-lasn-utc6h)如今您已經瞭解了 hooks 的基礎知識並使用了 hooks 與redux ，我建議您閱讀文檔(https://react-redux.js.org/api/hooks)以深刻了解這些概念。

此外，我建議閱讀 Functional React: Quickstart with React Hooks, Redux and MobX(https://amzn.to/2T07zrK) 一書，深刻了解 Redux、React 和 MobX。