Redux 重构 React 应用实战-JavaScript中文网-JavaScript教程资源分享门户

在开发 React 应用时，我们常常需要管理应用中的状态。当应用变得越来越复杂时，状态管理就变得越来越困难。Redux 是一种流行的状态管理库，它提供了一种可预测的状态管理方案，可以帮助我们更好地组织和管理应用的状态。

在本文中，我们将介绍如何使用 Redux 重构一个简单的 React 应用。我们将从基础概念开始，逐步深入，最终完成一个实用的示例。

Redux 基础概念

Redux 的核心概念包括：Store、Action 和 Reducer。

Store

Store 是应用中存储状态的地方。它是一个包含整个应用状态的对象。我们可以通过 getState() 方法获取当前状态，通过 dispatch(action) 方法触发状态更新，通过 subscribe(listener) 方法订阅状态变化。

Action

Action 是描述状态变化的对象。它包含一个 type 属性和一些其他属性。type 属性是一个字符串，表示这个 Action 的类型。其他属性可以是任何类型的数据，用来描述这个 Action 所带的数据。

Reducer

Reducer 是一个纯函数，用来描述状态的变化。它接收一个当前状态和一个 Action，返回一个新的状态。Reducer 必须是一个纯函数，也就是说，它不能修改传入的状态对象，而是要返回一个新的状态对象。

Redux 实战

现在，我们来看一个简单的 React 应用，它包含一个计数器组件，点击按钮可以增加或减少计数器的值。

// javascriptcn.com 代码示例
import React, { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

export default Counter;

这个应用的状态只有一个 count 变量，它存储了计数器的值。现在，我们来使用 Redux 重构这个应用。

安装 Redux

首先，我们需要安装 Redux：

npm install redux

创建 Store

接下来，我们需要创建一个 Store，用来存储应用的状态。我们可以将 Store 放在应用的顶层组件中。

// javascriptcn.com 代码示例
import React, { useState } from "react";
import { createStore } from "redux";

function Counter() {
  const [count, setCount] = useState(0);

  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);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>+</button>
      <button onClick={() => setCount(count - 1)}>-</button>
    </div>
  );
}

export default Counter;

在这个代码中，我们创建了一个 reducer 函数，它接收一个 state 和一个 action，返回一个新的 state。在 reducer 函数中，我们使用 switch 语句来根据不同的 action.type 处理不同的状态变化。如果 action.type 是 "INCREMENT"，则将 count 值加 1，如果是 "DECREMENT"，则将 count 值减 1。

接下来，我们使用 createStore(reducer) 方法创建一个 Store。这个方法接收一个 reducer 函数，并返回一个 Store 对象。我们将这个 Store 对象存储在组件的状态中。

更新状态

现在，我们需要将组件的状态与 Store 中的状态同步。我们可以使用 useSelector 和 useDispatch 两个 Hook 来实现这个功能。

// javascriptcn.com 代码示例
import React, { useState } from "react";
import { createStore } from "redux";
import { useSelector, useDispatch } from "react-redux";

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

  const increment = () => {
    dispatch({ type: "INCREMENT" });
  };

  const decrement = () => {
    dispatch({ type: "DECREMENT" });
  };

  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);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </div>
  );
}

export default Counter;

在这个代码中，我们使用 useSelector((state) => state.count) Hook 来获取 Store 中的 count 值。我们还使用 useDispatch() Hook 来获取一个 dispatch 函数，用来触发状态更新。我们将这个 dispatch 函数传递给 increment 和 decrement 函数，当按钮被点击时，调用这个 dispatch 函数来触发状态更新。

现在，我们已经完成了一个使用 Redux 的计数器应用。这个应用非常简单，但是它包含了 Redux 的基本概念，可以帮助我们更好地理解 Redux 的工作原理。

总结

Redux 是一个流行的状态管理库，它提供了一种可预测的状态管理方案，可以帮助我们更好地组织和管理应用的状态。在本文中，我们介绍了 Redux 的基本概念，包括 Store、Action 和 Reducer。我们还使用一个简单的示例，演示了如何使用 Redux 重构一个 React 应用。

下一步，我们可以尝试使用 Redux 来管理更复杂的应用状态。同时，我们还可以学习 Redux 的高级特性，比如中间件、异步操作等。

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