React-redux ReduxToolkit 的使用和封装 如何同步和异步修改initialState内的数据 超详细说明

目录

认识Redux Toolkit

安装Redux Toolkit：

 Redux Toolkit的核心API主要是如下几个：

configureStore：

createSlice：

createAsyncThunk:

store的创建

 将 store 内的数据 在app组件内共享

重构代码 – 创建counter的reducer

reducers 官方推荐同步修改 initialState 方法

使用 connect 函数将 store 内的数据映射到组件 props内

Redux Toolkit的异步操作

 extraReducer的另外一种写法

使用 hooks 操作redux-toolkit 

---

认识Redux Toolkit

        Redux Toolkit 是官方推荐的编写 Redux 逻辑的方法。

        redux的编写逻辑过于的繁琐和麻烦。

        并且代码通常分拆在多个文件中（虽然也可以放到一个文件管理，但是代码量过多，不利于管理）；

        Redux Toolkit包旨在成为编写Redux逻辑的标准方式，从而解决上面提到的问题；

        在很多地方为了称呼方便，也将之称为“RTK”；

安装Redux Toolkit：

npm install @reduxjs/toolkit react-redux

yarn add  @reduxjs/toolkit react-redux

pnpm install @reduxjs/toolkit react-redux

 Redux Toolkit的核心API主要是如下几个：

configureStore：

        包装createStore以提供简化的配置选项和良好的默认值。它可以自动组合你的 slice reducer，添加你提供的任何 Redux 中间件，redux-thunk默认包含，并启用 Redux DevTools Extension。

createSlice：

        接受reducer函数的对象、切片名称和初始状态值，并自动生成切片reducer，并带有相应的actions。

createAsyncThunk:

        接受一个动作类型字符串和一个返回承诺的函数，并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的 thunk。

store的创建

        configureStore用于创建store对象，常见参数如下：

        reducer，将slice中的reducer可以组成一个对象传入此处；

        middleware：可以使用参数，传入其他的中间件；

        devTools：是否配置devTools工具，默认为true；

        在 src 目录下创建一个store 文件夹 文件夹内创建 index.js 文件

// npm install @reduxjs/toolkit react-redux -S
import { configureStore } from '@reduxjs/toolkit'
// 导入 namesReducer 进行使用
import namesReducer from './features/names'
import asyncListReducer from './features/asyncList'

const store = configureStore({
  reducer: {
    names: namesReducer,
    asyncList: asyncListReducer
  },
  // reduxjs/toolkit 默认是已经集成了 redux-thunk 和 redux-devtool 如果需要添加其他中间件可以使用middleware参数，传入其他的中间件
  // middleware: [thunk, logger],

  // 是否配置 devTool 工具，默认为 true 开发环境建议 true 生产环境建议 false
  devTools: true
})

export default store

 将 store 内的数据 在app组件内共享

使用 react-redux 给我们提供的 Provider 包裹 App 组件 传入store 进行数据共享

import { Provider } from 'react-redux'
import store from './Redux-Toolkit的使用/store'
import App from './Redux-Toolkit的使用/App'

// 编写 react 代码，并且通过 React 渲染出来对应的内容
const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(
  <Provider store={store}>
    <App name={'HachimanC'} />
  </Provider>
)