使用 Redux Hook 重构你的 React Redux 应用-JavaScript中文网-JavaScript教程资源分享门户

前言

在 React Redux 的开发中，我们经常使用 connect 高阶组件来将我们的组件与 Redux 存储连接起来，以便获取状态和更新值。但是，随着 React Hooks 的问世，我们可以使用 Redux Hooks 来更加方便地管理应用程序的状态。

在这篇文章中，我们将通过使用 Redux Hook 重构一个简单的 React Redux 应用，来演示如何使用 Redux Hook 来提高我们的开发效率。

环境准备

为了使用 Redux Hook，我们需要在项目中安装 react-redux 和 redux 包。你可以通过 npm 或者 yarn 安装。

使用 npm：

npm install redux react-redux

使用 yarn：

yarn add redux react-redux

Redux Hook 简介

Redux Hooks 是 React Redux 库提供的一组 Hook。这些 Hook 使得我们能够在函数组件中访问 Redux 存储，而不再需要使用 connect 高阶组件。

以下是一些常用的 Redux Hooks：

useSelector: 用于从存储中选择和返回执行器所需的状态。
useDispatch: 返回一个用于向存储分发操作的 dispatch 函数。
useStore: 返回应用程序存储的完整状态对象。

有了这些 Hooks，我们不再需要编写冗长的连接代码，它们可以让我们更加简洁明了地管理我们的状态和行为。

Redux Hook 示例

我们来看一个例子：一个简单的计数器应用程序。它有两个按钮，一个用于增加计数器的值，另一个则用于减少计数器的值。

设计思路

我们需要以下几个步骤来完成这个应用程序：

创建 Redux 存储。
定义动作 (actions)。
创建 reducer 函数。
将 reducer 传递给 Redux store。
在应用程序中使用 Redux Hook。

代码实现

step 1: 创建 Redux 存储

首先，我们需要创建 Redux 存储，可以使用 createStore 函数来创建，并传递我们的 reducer 函数。

import { createStore } from 'redux';

const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

const store = createStore(reducer);

step 2: 定义动作

我们需要先定义两个动作：增加计数器和减少计数器。这些动作使用常量作为其操作类型 (type)。

export const increment = () => {
  return {
    type: 'INCREMENT'
  };
};

export const decrement = () => {
  return {
    type: 'DECREMENT'
  };
};

step 3: 创建 reducer 函数

我们将根据操作类型来更新状态。在这个例子中，我们只有一个状态 count。每当执行操作时，我们都会更新计数器的值。

const reducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
};

step 4: 将 reducer 传递给 Redux store

我们需要将 reducer 函数传递给 Redux 应用程序存储，以便 store 知道如何更新状态。

const store = createStore(reducer);

step 5: 在应用程序中使用 Redux Hook

最后，我们将使用 useSelector hook 来从存储中选择状态 count，使用 useDispatch hook 来获取分发动作的 dispatch 函数。我们将使用这两个 Hook 来更新我们的计数器。

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { increment, decrement } from './actions';

const App = () => {
  const count = useSelector((state) => state.count);
  const dispatch = useDispatch();

  const handleIncrement = () => {
    dispatch(increment());
  };

  const handleDecrement = () => {
    dispatch(decrement());
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={handleIncrement}>+</button>
      <button onClick={handleDecrement}>-</button>
    </div>
  );
};

export default App;

在上面的代码中，我们使用 useSelector hook 来选择状态 count，我们使用 useDispatch hook 来获取分发操作的 dispatch 函数。

当用户单击增加或减少按钮时，我们通过 handleIncrement 和 handleDecrement 函数分别调用 increment() 和 decrement() 动作，并将它们传递给 dispatch 函数，以便更新存储中的状态。

总结

在这篇文章中，我们了解了如何使用 Redux Hook 来提高 React Redux 应用程序的开发效率。我们学习了如何创建 Redux 存储，定义操作，创建 reducer 函数，并将其传递给 Redux 应用程序存储。最后，我们通过示例代码演示了如何使用 Redux Hook 来管理一个简单的计数器应用程序的状态。

Redux Hook 是一系列非常有用的库，可以帮助我们更好、更快地管理 React 应用程序的状态。如果你正在开发一个 React 应用程序，并且希望更加简洁美观地编写代码，我建议你尝试使用 Redux Hook。

参考资料

React Redux Hooks

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65b9b802add4f0e0ff23dd3f