Redux 中文文档翻译-FunTeaLearn Online Web Tutorials

Redux 是一个流行的 JavaScript 应用程序状态管理库。它的主要思想是将所有状态存储在一个中央存储库中，并使用纯函数来更改它。Redux 通过这种方式确保状态具有可预测性和可控性。

Redux 与 React 紧密结合，但其实也可以轻松集成到其他框架中。Redux 拥有广泛的社区，提供了许多有用的拓展和工具。如果您想使用 Redux，不管是在 React 中还是在其他应用程序中，本文将为您提供基础的指导和深度学习。

安装

要在您的应用程序中使用 Redux，您需要首先安装 Redux 包。您可以使用 npm 或 yarn 安装它。

npm install --save redux

或

yarn add redux

安装完成后，您就可以在应用程序中使用 Redux。

基本概念

Redux 提供了可预测的状态管理。这是因为它通过一个中央存储库来控制状态，并且使用纯函数来更改它。以下是 Redux 的主要概念：

Store

存储状态的地方。它是应用程序中唯一的状态源。只能使用纯函数来更改状态。

Action

一条指令，用于更改存储状态。它描述了将要发生的操作。它是一个带有 type 字段的对象。

Reducer

一个纯函数，用于更改存储状态。在 Redux 中，只能使用这些函数来更改状态。

Dispatch

用于向存储库发送 Action 的函数。它可以是一个简单的函数调用，也可以是使用中间件等高级技术的复杂操作。

Subscriber

监听存储库更改的函数。

示例

以下示例将介绍 Redux 的基本流程。我们将使用 React 库来构建应用程序，并将 Redux 用于状态管理。我们首先创建一个存储库。

// www.javascriptcn.com code example
import { createStore } from 'redux';

const initialState = {
  count: 0
};

function reducer(state = initialState, 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);

在我们的应用程序中，我们有一个计数器。我们将创建两个按钮，一个用于增加计数器的值，另一个用于减少计数器的值。

// www.javascriptcn.com code example
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';

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

  const increment = () => dispatch({ type: 'INCREMENT' });
  const decrement = () => dispatch({ type: 'DECREMENT' });

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

我们使用 useDispatch 钩子来访问 Redux 中的 dispatch 函数，并使用 useSelector 钩子来访问存储库中的状态。在这个例子中，我们使用它们来增加和减少计数器。当我们点击按钮时，会调用相应的 Action，并通过存储库来更新状态。

这个例子只是冰山一角。Redux 还有很多其他强大的功能，例如中间件和异步操作。希望本文能为您提供足够的指导和深度学习，以便您充分利用 Redux 库的功能。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/6780776ece7f4861253cad96

Redux 中文文档翻译

安装