在React中设置Redux - Shell/Bash

Redux 是一个在 JavaScript 应用中管理状态的工具。它可以配合 React 一起使用，帮助我们管理完整应用状态，同时提高代码复用性和可测试性。Redux 就像一个存储应用程序所有状态的容器，Redux 中的状态可以被任意的组件访问。在这里我们使用 Shell 或 Bash 命令来介绍如何在 React 中设置 Redux。

安装 Redux

首先，你需要安装 Redux。你可以使用 npm 安装它，在项目根目录下执行以下命令：

npm install redux

安装 React-Redux

安装 Redux 之后，你还需要安装 React-Redux。React-Redux 是一个为 React 应用提供与 Redux 集成的库。使用 npm 安装，执行以下命令：

npm install react-redux

创建 Redux Store

一旦你安装了 Redux 和 React-Redux，你就可以创建 Redux store 了。在你的项目中创建一个新文件，例如 store.js，并编写以下内容：

import { createStore } from 'redux';
import rootReducer from './reducers';  // 引入你的 reducer

const store = createStore(rootReducer);

export default store;

Redux store 是一个包含完整应用状态树的单一数据源对象。调用 createStore() 方法将返回新 store 对象。它的参数是一个根 reducer 函数，该函数将所有 reducer 合并成一个单一的 reducer 函数。

创建 Reducer

在上面的 store.js 文件中，我们引入了一个 rootReducer，这样我们就需要创建一个 reducer。reducer 是一个纯函数，它接收两个参数：当前状态和一个操作对象。它根据操作对象返回一个新状态。以下是一个 reducer 的示例：

const initialState = { count: 0 };

function rootReducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

export default rootReducer;

上面的代码有一个初始状态 { count: 0 }，它包含一个计数器。reducer 接收一个操作对象，这个对象具有一个 type 属性，根据这个属性不同，返回不同的新状态。

使用 Redux Provider

我们已经创建了 Redux store 和根 reducer。接下来，我们需要将 store 注入到 React 组件中，并使其在整个应用程序中可用。我们可以使用 React-Redux 的 Provider 组件。下面是 React-Redux Provider 组件的示例代码：

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';  // 引入你的 Redux store
import App from './App';  // 引入你的根组件

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

Provider 组件使你的 Redux store 在 React 应用程序中全局可用，因此你可以在组件中使用 Redux store。

在组件中使用 Redux

使用 Provider 组件和 Redux store 后，你可以在组件中使用 Redux 状态和状态更新。以下是一个示例组件，它使用了 Redux state：

import React from 'react';
import { useSelector } from 'react-redux';  // 引入 useSelector 钩子

function Counter() {
  const count = useSelector(state => state.count);  // 获取 count 状态

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

export default Counter;

上面的组件引入了一个名为 useSelector 的钩子，用于从 Redux store 中选择状态。该钩子接收一个函数作为参数，此函数接收当前状态并返回你想选择的状态属性。

此外，你还可以使用 useDispatch 钩子来 dispatch 对象到 store 中。例如：

import { useDispatch } from 'react-redux';  // 引入 useDispatch 钩子

function Counter() {
  const dispatch = useDispatch();  // 获取 dispatch 函数
  const count = useSelector(state => state.count);

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

export default Counter;

上面的代码在组件中使用 useDispatch 钩子获取 dispatch 函数。由于 dispatch 是我们更新状态的方式，因此获取它变得非常重要。

结论

现在你已经知道如何在 React 中使用 Redux 了。在本文中，我们介绍了如何安装 Redux 和 React-Redux，创建 Redux store 和 reducer，使用 Provider 组件将 Redux store 注入到组件中，以及使用 useSelector 和 useDispatch 钩子在组件中使用 Redux 的状态和 dispatch 函数。现在你可以开始享受 Redux 为应用程序状态管理带来的便捷和便利了。