Redux：如何解决不更新组件的问题？-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，我们经常会遇到一个问题：组件的状态更新了，但是页面并没有重新渲染。这是因为 React 的组件更新是基于状态的，如果状态没有改变，组件就不会更新。而 Redux 则提供了一种解决方案，可以让我们轻松解决不更新组件的问题。

Redux 简介

Redux 是一个状态管理库，它可以让我们统一管理应用的状态，并提供了一些 API 来让我们方便地更新状态。Redux 的核心概念包括：

Store：存储应用的状态。
Action：描述状态的变化。
Reducer：根据 Action 更新状态。

Redux 的工作流程如下图所示：

当我们需要更新应用的状态时，我们会派发一个 Action，然后 Reducer 会根据这个 Action 更新状态。当状态更新后，Redux 会通知所有订阅了状态变化的组件重新渲染。

不更新组件的问题

在 React 开发中，我们经常会遇到一个问题：组件的状态更新了，但是页面并没有重新渲染。这是因为 React 的组件更新是基于状态的，如果状态没有改变，组件就不会更新。例如，下面这个组件的状态是一个数组：

// javascriptcn.com 代码示例
function MyComponent() {
  const [list, setList] = useState([]);

  function handleClick() {
    setList([...list, Math.random()]);
  }

  return (
    <div>
      <button onClick={handleClick}>Add Item</button>
      {list.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

当我们点击 "Add Item" 按钮时，组件的状态会更新，但是页面并没有重新渲染。这是因为我们使用的是 useState 钩子，而 useState 钩子只会在状态真正改变时才会触发重新渲染。因此，我们需要一种方法来让组件在状态改变时重新渲染。

使用 Redux 解决问题

使用 Redux 可以轻松解决不更新组件的问题。首先，我们需要安装 Redux：

npm install redux

然后，我们需要创建一个 Redux 的 Store，用来存储应用的状态。在这个例子中，我们的状态是一个数组，因此我们可以创建一个包含一个数组的初始状态：

const initialState = { list: [] };

然后，我们需要创建一个 Reducer，用来根据 Action 更新状态。在这个例子中，我们只需要处理一个 Action，它会向数组中添加一个新的元素：

function reducer(state = initialState, action) {
  switch (action.type) {
    case "ADD_ITEM":
      return { ...state, list: [...state.list, action.payload] };
    default:
      return state;
  }
}

接下来，我们需要创建一个 Action Creator，用来创建一个添加元素的 Action：

function addItem(item) {
  return { type: "ADD_ITEM", payload: item };
}

然后，我们需要将这个 Action Creator 和 Reducer 注册到 Redux 的 Store 中：

import { createStore } from "redux";

const store = createStore(reducer);

function handleClick() {
  const item = Math.random();
  store.dispatch(addItem(item));
}

最后，我们需要将组件连接到 Redux 的 Store 中，这样组件就可以订阅状态的变化了：

// javascriptcn.com 代码示例
import { useSelector } from "react-redux";

function MyComponent() {
  const list = useSelector((state) => state.list);

  function handleClick() {
    const item = Math.random();
    store.dispatch(addItem(item));
  }

  return (
    <div>
      <button onClick={handleClick}>Add Item</button>
      {list.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </div>
  );
}

现在，当我们点击 "Add Item" 按钮时，组件的状态会更新，并且页面会重新渲染。这是因为我们使用了 Redux，它会通知所有订阅了状态变化的组件重新渲染。

总结

在本文中，我们介绍了 Redux，并演示了如何使用 Redux 解决不更新组件的问题。Redux 可以让我们统一管理应用的状态，并提供了一些 API 来让我们方便地更新状态。当我们使用 Redux 时，组件可以订阅状态的变化，这样组件就可以在状态改变时重新渲染。如果你遇到了不更新组件的问题，那么使用 Redux 是一个很好的解决方案。

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