本文，我们将学习在 React 应用中怎么创建 Redux Store。同时，我们将分享怎么使用 Redux store 去管理复杂的 states。
此外，我们将学习使用 toolkit module 来创建一个 slice state。
Redux 是一个很受欢迎且开源的 JavaScript 库，用来管理应用的状态。
Redux 为 React 赋能，并允许你创建用户界面。React Redux 是 React 官方为 Redux 绑定使用的。
Redux 提供了一个存储，我们可以使用 Provider 组件将其集成到 React 中。它允许你从 Redux Store 中读取数据并将 Actions 分发到 Store 中以更新状态。
创建 React 应用
打开控制台，输入下面的命令行，来安装 create-react-app 工具：
npm install create-react-app --global现在，我们需要执行给定的命令行以创建一个新的 react 应用。
npx create-react-app react-demo然后，进入该项目：
代码语言：javascript复制cd react-demo安装 React Redux Module
为了创建一个 redux store，我们将同时安装 react-redux 和 redux toolkit。
npm install react-redux @reduxjs/toolkit使用 Redux Provider 包裹应用
React Redux 提供了一个 Provider 组件。它在 React 应用程序中增加了 Redux store， 并允许该 store 在整个 React 应用中可用。
我们导入 redux store 组件，然后添加到 Provider 组件中。
在 src/index.js 文件中添加下面的代码：
代码语言：javascript复制import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from 'react-redux';
import { store } from './store/index';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
)创建 Redux Store
在 src 目录中，我们创建名为 store 文件夹，然后创建一个名为 index.js 文件。
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from '../reducers/counterSlice';
export default configureStore({
reducer: {
counter: ,
},
});configureStore()：包装 createStore 以提供简化的配置选项和良好的默认值。
它会自动添加或者组合你的 slice reducers，并且添加你提供的任何 Redux 中间件。它默认包含 redux-thunk 并允许使用 Redux DevTools 扩展。
创建 Redux State Slice Reducer
接着，创建 reducers/ 文件夹，然后创建名为 counterSlice.js 文件并添加给定的代码：
代码语言：javascript复制import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0,
},
reducers: {
increment: (state) => {
state.value = 1
},
decrement: (state) => {
state.value = state.value - 1
},
},
})
export const { increment, decrement } = counterSlice.actions
export default counterSlice.reducer**createSlice()**：接收一个包含 reducer 函数、slice 名称和初始状态值的 state 对象，并且自动生成相应的 action 类型的 slice reducer。
在 Store 中注册 State Slice
在这一步中，我们将添加 slice reducer 到 counter 属性中。在 store/index.js 文件中插入该代码。
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from '../reducers/counterSlice'
export default configureStore({
reducer: {
counter: counterReducer,
},
})在 React 组件中使用 Redux State
打开 App.js 文件，然后添加下面的代码。在这个文件中，我们将向你展示如何在 React 组件中使用 React Redux store。
import '../node_modules/bootstrap/dist/css/bootstrap.min.css'
import './App.css'
import { useSelector, useDispatch } from 'react-redux'
import { increment, decrement } from './reducers/counterSlice'
function App() {
const count = useSelector((state) => state.counter.value)
const dispatch = useDispatch()
return (
<div className="App container mt-5 text-center">
<h2 className="mb-3">React Js Redux Store with Slice State Examle</h2>
<p className="h1">{count}</p>
<button
onClick={() => {
dispatch(increment())
}}
className="me-2 btn btn-primary"
>
Increment
</button>
<button
onClick={() => {
dispatch(decrement())
}}
className="me-2 btn btn-danger"
>
Decrement
</button>
</div>
)
}
export default App在浏览器中查看应用
该步，我们将向你展示如何运行开发环境服务。
代码语言：javascript复制npm start上面的命令行执行后，通过下面给定的 url 进行测试。
http://localhost:3000
总结
在这个教程中，我们已经学会在 React 应用中如何通过 React Redux 和 Redux Toolkit 设置 redux store。
Redux 通过单向数据流模型来管理 React 中的数据。React Redux 在 React 中很容易实现。理想情况下，它订阅 Redux store 并检查组件的数据是否发生更改，然后重新渲染组件。
参考
- how-to-create-and-use-redux-store-in-react-js
