React 是一种流行的 JavaScript 库，用于构建用户界面。Redux 是一个 JavaScript 应用程序状态管理工具，它可以帮助我们在 React 应用程序中管理应用程序状态。Redux 的主要目标是使状态管理变得更加可预测和可测试。本篇文章将介绍如何在 React 应用程序中使用 Redux。
Redux 的核心概念
在了解如何在 React 应用程序中使用 Redux 之前，我们需要先了解 Redux 的核心概念。Redux 有三个核心概念：store、action 和 reducer。
Store
Store 是一个包含应用程序状态的对象。它是 Redux 中的核心概念之一，因为它存储了应用程序的状态。我们可以使用 createStore 函数创建一个 store。
Action
Action 是一个描述状态变化的对象。它是 Redux 中的核心概念之一，因为它描述了状态的变化。当我们在应用程序中执行某个操作时，我们需要创建一个 action 来描述这个操作。例如，当用户点击一个按钮时，我们可以创建一个 action 来描述这个操作。
Reducer
Reducer 是一个函数，它接收一个 action 和当前状态作为参数，并返回一个新的状态。它是 Redux 中的核心概念之一，因为它描述了状态的变化。当我们创建一个 action 并将其分派给 store 时，store 会调用 reducer 函数来更新应用程序的状态。
在 React 应用程序中使用 Redux
现在我们已经了解了 Redux 的核心概念，让我们看看如何在 React 应用程序中使用 Redux。
安装 Redux
首先，我们需要安装 Redux。我们可以使用 npm 来安装 Redux。
npm install redux
创建一个 store
我们可以使用 createStore 函数来创建一个 store。
// javascriptcn.com 代码示例
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);在上面的代码中，我们创建了一个名为 initialState 的对象，它包含一个名为 count 的属性，其初始值为 0。我们还创建了一个 reducer 函数，它接收一个 state 和一个 action，并返回一个新的 state。我们使用 createStore 函数来创建一个 store，并将 reducer 函数作为参数传递给它。
在组件中使用 store
现在我们已经创建了一个 store，让我们看看如何在组件中使用它。
// javascriptcn.com 代码示例
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
function Counter() {
const count = useSelector((state) => state.count);
const dispatch = useDispatch();
function handleIncrement() {
dispatch({ type: 'INCREMENT' });
}
function handleDecrement() {
dispatch({ type: 'DECREMENT' });
}
return (
<div>
<h1>Count: {count}</h1>
<button onClick={handleIncrement}>Increment</button>
<button onClick={handleDecrement}>Decrement</button>
</div>
);
}
export default Counter;在上面的代码中，我们使用 useSelector 函数从 store 中选择 count 属性。我们还使用 useDispatch 函数来获取 dispatch 函数。我们使用 dispatch 函数来分派一个 action，从而更新应用程序的状态。
将 store 提供给应用程序
现在我们已经创建了一个 store，并在组件中使用它，让我们看看如何将 store 提供给应用程序。
// javascriptcn.com 代码示例
import React from 'react';
import { Provider } from 'react-redux';
import Counter from './Counter';
import store from './store';
function App() {
return (
<Provider store={store}>
<Counter />
</Provider>
);
}
export default App;在上面的代码中，我们使用 Provider 组件将 store 提供给应用程序。我们将 Counter 组件作为 Provider 组件的子组件，这样 Counter 组件就可以在应用程序中使用 store。
总结
在本篇文章中，我们介绍了 Redux 的核心概念：store、action 和 reducer。我们还介绍了如何在 React 应用程序中使用 Redux。我们使用 createStore 函数创建一个 store，并使用 useSelector 和 useDispatch 函数在组件中使用它。最后，我们使用 Provider 组件将 store 提供给应用程序。我希望这篇文章可以帮助你了解如何在 React 应用程序中使用 Redux。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/657975b8d2f5e1655d37ea70