Redux +Toolkit 工具包快速入门
您将学到什么
- 如何设置并使用 Redux Toolkit 和 React-Redux
先决条件
- 熟悉ES6 语法和功能
- 了解 React 术语：JSX、State、Function Components 、 Props和Hooks
- 理解Redux 术语和概念
1、基本使用
1.1、安装 Redux Toolkit 和 React- Redux
将 Redux Toolkit 和 React-Redux 包添加到您的项目：
npm install @reduxjs/toolkit react-redux1.2、创建一个 Redux Store
创建一个名为 的文件src/store/index.js。从 Redux Toolkit 导入configureStoreAPI。我们首先创建一个空的 Redux 存储，然后将其导出：
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 传递：
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.actionsexport default counterSlice.reducer1.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><buttonaria-label="Increment value"onClick={() => dispatch(increment())}>Increment</button><span>{count}</span><buttonaria-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 扩展：
- Chrome 的 React DevTools 扩展程序
- 适用于 Firefox 的 React DevTools 扩展
- Redux DevTools 扩展：
- Chrome 的 Redux DevTools 扩展程序
- 适用于 Firefox 的 Redux DevTools 扩展