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-redux

1.2、创建一个 Redux Store

创建一个名为 的文件src/store/index.js。从 Redux Toolkit 导入configureStoreAPI。我们首先创建一个空的 Redux 存储，然后将其导出：

src/store/index.js

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.actionsexport 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><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” ReducercreateSlice  --创建切片并挂载在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 扩展