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 包添加到您的项目：

codeBlock_bY9V 复制代码

npm install @reduxjs/toolkit react-redux

1.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" 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 扩展