React + Redux 懒人教程

见解分享

2024-02-14 21:14:09

前言

大家好，在上一篇文章《Redux 懒人教程》中，我们了解了如何使用 Redux 管理庞杂的全局状态。今天，我们将进一步探索 Redux，了解它如何帮助我们管理 React 应用程序的状态。

React 状态管理简介

在深入了解 Redux 之前，让我们先回顾一下 React 中状态管理的一些基本概念。React 组件使用内部状态来管理自身数据和行为。该状态是一个 JavaScript 对象，由 setState 方法更新。

然而，在复杂的应用程序中，管理组件之间的状态变得具有挑战性。例如，一个计数器组件可能需要在多个地方访问，而维护多个状态副本容易出错。这就是 Redux 发挥作用的地方。

Redux：可预测的状态容器

Redux 是一个开源 JavaScript 库，它提供了一个可预测的状态管理系统。它的核心原则之一是 单一事实来源 ，这意味着应用程序的整个状态都存储在一个中央存储库中。

Redux 遵循一个 单向数据流 模型，这意味着状态只能通过动作来改变。动作是表示状态更改意图的纯对象。Redux 会接收动作，根据动作创建新的状态并将其分配给 store。

React + Redux 集成

将 Redux 集成到 React 应用程序中很简单。我们可以使用 react-redux 库，它提供了一些连接 React 组件和 Redux store 的工具。

最常见的做法是使用 useSelector 钩子从 store 中提取状态，并使用 useDispatch 钩子分发动作。通过这种方式，我们的 React 组件可以访问和修改全局应用程序状态。

示例：计数器应用程序

为了展示 React 和 Redux 的实际应用，让我们创建一个简单的计数器应用程序。

步骤 1：创建 Redux store

import { createStore } from "redux";

const initialState = {
  count: 0,
};

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

const store = createStore(reducer);

步骤 2：创建 React 组件

import React, { useSelector, useDispatch } from "react";

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

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => dispatch({ type: "INCREMENT" })}>+</button>
      <button onClick={() => dispatch({ type: "DECREMENT" })}>-</button>
    </div>
  );
};

步骤 3：连接 React 组件和 Redux store

import React from "react";
import { Provider } from "react-redux";
import store from "./store";
import Counter from "./Counter";

const App = () => {
  return (
    <Provider store={store}>
      <Counter />
    </Provider>
  );
};