React Redux 是一个 JavaScript 库，旨在用于高效地在 React 应用程序中创建和维护状态。
在这里，React Redux 通过创建一个 redux store 来解决这个问题，该 store 负责存储状态，并提供方法让我们可以直接在任何组件内部使用状态，或者以规定的方式操作状态。
目录
- Redux Toolkit
- 如何在 ReactJS 中构建 Redux Store 并管理复杂状态
- 使用 Redux Provider 包裹 App
- 创建 Redux Store
- 创建 Redux 状态切片 Reducer
- 在 Store 中注册状态切片
- 在 React 组件中使用 Redux 状态
目录
Redux Toolkit
Redux Toolkit 就像是 Redux 的一层包装，并封装了其必要的功能。Redux Toolkit 非常灵活，为大型应用程序提供了一种简单的 store 创建方式。它遵循 SOPE 原则，这意味着它是简单的、固执己见的（Opinionated，指有约定俗成的规范）、强大的且有效的。
如何在 ReactJS 中构建 Redux Store 并管理复杂状态
在安装了所需的模块之后，让我们来看看具体的步骤：
- 首先，利用 Redux Toolkit 提供的 INLINECODEf56536b0 方法在 INLINECODE2cb9aeb1 文件中创建一个 store。这将作为我们的 store，但我们尚未创建 reducers。
- 现在，使用 Provider 将整个应用程序包裹起来，这将把我们创建的 store 提供给应用程序。
- 现在，为 store 创建 slices。我们使用 Toolkit 中的
createSlice方法来创建一个 slice，它包含.. - Slice 的名称
- 初始状态
- Reducer，其中包含 action
- 导出 reducer 和 actions。
- 在 store 内部导入 reducer 以将其注册。
- 现在是时候使用它了。使用 hook 在组件内部选择状态，并导入相应的 actions。
- 当需要更新时，dispatch 该 action，这将更新 store 内部以及组件内部的状态。
创建 React 应用程序并安装模块的步骤：
步骤 1： 使用以下命令创建一个 React 应用程序：
npx create-react-app redux_store
步骤 2： 创建项目文件夹（即 project_name）后，使用以下命令移动到该文件夹：
cd redux_store
步骤 3： 安装 React Redux 模块：
npm install @reduxjs/toolkit react-redux
项目结构：
package.json 文件中更新后的依赖项将如下所示。
"dependencies": {
"@reduxjs/toolkit": "^2.2.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-redux": "^9.1.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
使用 Redux Provider 包裹 App
- 在 INLINECODEfe1c031e 中，从 INLINECODE2f791010 导入 store，并从 react redux 导入 provider。
语法：
创建 Redux Store
- 现在创建一个
store.js文件，并在其中创建一个 store。 - 同时将其导出，目前它不包含任何 reducer，我们会在创建 reducers 后将其注册。
语法：
export const store = configureStore({
reducer: {
},
})
创建 Redux 状态切片 Reducer
- 现在创建一个 slice，这包括 reducer 和初始状态。此外，名称应该是唯一的。要创建 slice，我们需要创建另一个文件
slice.js。 - 之后，导出 slice reducer 和 actions。
语法：
export const counterSlice = createSlice({
name: ‘ ‘,
initialState: ,
reducers: {
action_name: (state) => update the state;
},
})
在 Store 中注册状态切片
- 只需在 store 内部导入 slice reducer 并将其注册到 store 中。
语法：
reducer: {
counter: reducer_Name,
}
在 React 组件中使用 Redux 状态
- 现在，使用 hook 在组件内部选择状态：
语法：
const state = useSelector( ( state ) => state.slice_name.value )
现在，为了更新状态，我们必须 dispatch 之前定义的 actions。
const dispatch = useDispatch( )
dispatch(action_name( ) )
解释：
- 在下面，我们可以看到两个按钮：增加和减少。
- 这些按钮将会向 store dispatch 增加和减少 action。
- store 内部的 reducer 将根据 action 更新计数器的值。这里的计数器就是一个状态。
- 这个状态在整个应用程序中可用，并且可以从任何组件进行操作。
示例：
JavaScript
import ‘./App.css‘;
import {
useSelector,
useDispatch
} from ‘react-redux‘
import {
decrement,
increment
} from ‘./store/slices/counterSlice‘
function App() {
const count = useSelector((state) => state.counter.value)
const dispatch = useDispatch()
return (