您将学到什么
- 如何设置并使用 Redux Toolkit 和 React-Redux
先决条件- 熟悉ES6 语法和功能
- 了解 React 术语：JSX、State、Function Components 、 Props和Hooks
- 理解Redux 术语和概念
1、基本使用
1.1、安装 Redux Toolkit 和 React- Redux
将 Redux Toolkit 和 React-Redux 包添加到您的项目：
codeBlock_bY9V
npm install @reduxjs/toolkit react-redux1.2、创建一个 Redux Store
创建一个名为 的文件src/store/index.js。从 Redux Toolkit 导入configureStoreAPI。我们首先创建一个空的 Redux 存储，然后将其导出：
src/store/index.js
codeBlock_bY9V
import { configureStore } from '@reduxjs/toolkit'
export default configureStore({
reducer: {}
})这会创建一个 Redux 存储，并自动配置 Redux DevTools 扩展，以便您在开发时检查存储
1.3、引入store
<Provider>一旦创建了 store，我们就可以通过在我们的应用程序周围放置一个 React-Redux 来使其可用于我们的 React 组件src/main.js。导入我们刚刚创建的 Redux store，将一个放在<Provider>你的周围<App>，并将 store 作为 prop 传递：
main.tsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'
import store from './store'
import { Provider } from 'react-redux'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<Provider store={store}>
<App />
</Provider>
</React.StrictMode>,
)
1.4、创建 Redux 状态切片
添加一个名为 的新文件src/store/counterSlice/index.js。在该文件中，createSlice从 Redux Toolkit 导入 API。
创建切片需要一个字符串名称来标识切片、一个初始状态值以及一个或多个 Reducer 函数来定义如何更新状态。创建切片后，我们可以导出生成的 Redux 动作创建器和整个切片的 Reducer 函数。
Redux 要求我们通过复制数据并更新副本来将所有状态更新写成不可变的。但是，Redux ToolkitcreateSlice和createReducerAPI 在内部使用Immer来允许我们编写"变异"更新逻辑，使其成为正确的不可变更新。
import { createSlice } from '@reduxjs/toolkit'
export const counterSlice = createSlice({
name: 'counter',
initialState: {
value: 0
},
reducers: {
increment: state => {
console.log('increment',state)
state.value += 1
},
decrement: state => {
state.value -= 1
},
incrementByAmount: (state, action) => {
state.value += action.payload
}
}
})
export const { increment, decrement, incrementByAmount } = counterSlice.actions
export default counterSlice.reducer
1.5、将切片操作添加store
接下来，我们需要从计数器切片中导入 Reducer 函数并将其添加到我们的存储中。通过在参数中定义一个字段reducer，我们告诉存储使用此切片 Reducer 函数来处理该状态的所有更新。
import { configureStore } from '@reduxjs/toolkit'
import counterReducer from './countAdd/counterSlice'
export default configureStore({
reducer: {
counter: counterReducer
}
})
1.6、在组件中使用切片
现在我们可以使用 React-Redux 钩子让 React 组件与 Redux 存储交互。我们可以使用 从存储中读取数据useSelector，并使用 调度操作useDispatch。创建一个src/features/counter/Counter.js包含组件的文件<Counter>，然后将该组件导入App.js并在 内部渲染它<App>。
import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { decrement, increment,incrementByAmount } from '../store/countAdd/counterSlice'
export function Counter() {
const count = useSelector(state => state.counter.value)
const dispatch = useDispatch()
return (
<div>
<div>
<button
aria-label="Increment value"
onClick={() => dispatch(increment())}
>
Increment
</button>
<span>{count}</span>
<button
aria-label="Decrement value"
onClick={() => dispatch(decrement())}
>
Decrement
</button>
<button onClick={()=>dispatch(incrementByAmount(10))}>
测试
</button>
</div>
</div>
)
}
现在，无论何时单击"增加"或"减少"按钮：
- 相应的 Redux 动作将被发送到 store
- 计数器切片器将看到操作并更新其状态
- 组件
<Counter>将从存储中看到新的状态值，并使用新数据重新渲染自身
1.7、总结
以上是关于如何设置和使用 Redux Toolkit 与 React 的简要概述。回顾一下细节：
概括
- 使用以下方法创建 Redux 存储
configureStore -- 创建公共存储
configureStore接受reducer函数作为命名参数configureStore自动使用良好的默认设置来设置商店- 为 React 应用程序组件提供 Redux 存储 -- 挂载store存储，存储传递到Provider
- 将 React-Redux
<Provider>组件放在你的<App />- 将 Redux 存储传递为
<Provider store={store}>- 使用以下代码创建一个 Redux "slice" Reducer
createSlice --创建切片并挂载在store上面
createSlice使用字符串名称、初始状态和命名的 Reducer 函数进行调用- Reducer 函数可以使用 Immer "改变"状态
- 导出生成的切片缩减器和动作创建器
useSelector/useDispatch在 React 组件中使用 React-Redux hooks --- 组件中使用切片功能
useSelector使用钩子从 store 读取数据- 获取
dispatch带有useDispatch钩子的函数，并根据需要分派操作
2、调试工具
- React DevTools 扩展：
- Redux DevTools 扩展：