React-Redux结合@Reduxjs/ToolKit使用类组件版本(二）

@Reduxjs/Toolkit 简称RTK 相对Redux 的优势是什么？

总结成一段话：
@reduxjs/toolkit 是 Redux 官方推出的工具包，旨在简化和加速 Redux 应用的开发。它提供了一组开发 Redux 应用常用功能的抽象和封装，包括 Redux 中的状态管理、中间件集成、异步操作和开发者工具等，以减少样板代码和提高开发效率。

@Reduxjs/ToolKit 主要特性和优势包括：

1.集成了 Redux 常用的功能：@reduxjs/toolkit 包含了 Redux 的核心功能，如创建 action 和 reducer 以及触发 state 更新。这使得开发者无需手动编写大量的 Redux 代码，并提供了一些额外的便利方法来简化开发流程。

2.自动化的 Redux store 配置：通过 configureStore 函数，@reduxjs/toolkit 提供了自动生成和配置 Redux store 的方式。它默认集成了常用的中间件（如 Redux Thunk），同时还可以启用 Redux DevTools Extension，并具有优化性能的功能。

3.简化的 reducer 写法：@reduxjs/toolkit 使用 createSlice 函数来定义 reducer，它会自动生成对应的 action 和 reducer 代码。这样可以极大地减少样板代码和提高代码可读性。

4.异步流程处理：@reduxjs/toolkit 内置了 Redux Thunk 中间件，这使得处理异步逻辑变得更简单。开发者可以轻松地编写异步的 action 创建函数，处理网络请求或其他副作用。

5.Immutable 更新：@reduxjs/toolkit 内置了 Immutable.js 库，可以自动处理 state 的不可变性。这消除了手动编写不可变更新代码的需要，使得状态管理更加简洁和可靠。

React-Redux 结合 Reduxjs/Toolkit 解决了什么问题？

总结成一句话：
@reduxjs/toolkit 相比，react-redux 是一个专为 React 应用开发而设计的基于 Redux 的库。它提供了一系列的 API 和组件，方便在 React 组件中使用 Redux 进行状态管理。主要区别如下：
1.范围：@reduxjs/toolkit 主要关注 Redux 的封装和工具化，而 react-redux 则是针对 React 应用的状态管理解决方案。

2.功能：@reduxjs/toolkit 包含了 Redux 的核心功能，包括 store 配置、reducer 和 action 的创建等。而 react-redux 提供了一些特定于 React 的功能，如 connect 函数和 Provider 组件，用于连接 Redux 的 store，并将状态传递给 React 组件。

3.抽象程度：@reduxjs/toolkit 提供了更高层次的抽象，通过封装和约定来简化 Redux 的使用。而 react-redux 则是在 Redux 基础上提供了一些 React 相关的实现和优化。

总结

综上所述，@reduxjs/toolkit 是一个针对 Redux 的工具包，旨在简化和加速 Redux 应用的开发。而 react-redux 是一个专为 React 应用开发而设计的基于 Redux 的库，提供了一些特定于 React 的功能和组件。两者在功能和应用范围上有所不同，但可以一起使用，以便更高效地开发 React 应用并管理状态。

实操

说明：本实操是基于React版本是18.0版本
1.安装 react-redux、@reduxjs/toolkit
2.构建store 目录且创建主文件index.js
//注意:从以前的createStore 变成了configureStore
import {configureStore} from "@reduxjs/toolkit"
//注意采用的是从切片中默认导出reducer
import countReduer from "./reducers/countSlice"
//注意采用的是从切片中默认到处reducer
import personReducer from "./reducers/personSlice"
export default configureStore({
      //配置reducer
      reducer:{
           count:countReduer,
           person:personReducer
      }
})
3.构建reducers文件夹，放各种store切片文件，里面分别有personSlice.js、countSlice.js文件
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";

const personSlice = createSlice({
  name: "person",
  initialState: {
    persons: [],
    newWorkPersons: [],
  },
  reducers: {
    //添加人员
    addPerson: (state, action) => {
      state.persons.push(action.payload);
    },
  },
  //处理异步,多个异步构建多个case
  extraReducers: (bulid) => {
    bulid.addCase(getPersonApi.fulfilled, (state, action) => {
      state.newWorkPersons.slice(0);

      state.newWorkPersons = [...action.payload];
    });
  },
});

//注意：异步直接导出,然后使用异步函数createAsyncThunk 构建异步模块
export const getPersonApi = createAsyncThunk("person/getPerson", async () => {
  //本地用Express模拟出来的接口
  const getInfo = await fetch("http://localhost:5000/persons");
  return getInfo.json();
});
export const { addPerson } = personSlice.actions;
export default personSlice.reducer;

countSlice.js代码内容如下:
import {createSlice} from "@reduxjs/toolkit"

const countSlice=createSlice({
    // 名称
     name:'count',
    // 初始化状态
     initialState:{
        //默认设置数量为10
        count:10,
     },
     reducers:{
           //添加值,state 状态和action动作
           addValue:(state,action)=>{
               state.count+=action.payload
                 
               console.log(state,action,'state,action....')
           },
           subStractValue:(state,action)=>{
               state.count-=action.payload
            console.log(state,action,'-state,action....')
           }

     }
})
//默认导出动作
export const {addValue,subStractValue}=countSlice.actions
//默认导出reducer reducer 是一个纯函数，是简化、归纳的意思
export  default countSlice.reducer

4.index.js主入口文件的配置
import ReactDOM from "react-dom/client"
import App from "./App.js"
import React from "react"
import {Provider} from "react-redux"
import store from "./store/index"
const root= ReactDOM.createRoot(document.querySelector("#root"))

root.render(
    <React.StrictMode>
         {/* react-redux 提供全局store */}
       <Provider store={store}>
        <App/>
        </Provider>
    </React.StrictMode>
)

5.person页面组件展示
import { Component } from "react";
import { connect } from "react-redux";
import { nanoid } from "nanoid";
//获取人员的接口
import { addPerson, getPersonApi } from "../../store/reducers/personSlice";
class Person extends Component {
  state = { userName: null, age: null };

  changeHandler = (e) => {
    this.setState({ [e.target.name]: e.target.value });
  };
  btnAdd = () => {
    const obj = {
      userName: this.state.userName,
      age: this.state.age,
      id: nanoid(),
    };
    this.props.addPeron(obj);
  };
  asyncGetPerson = () => {
    console.log("dffff...");
    this.props.asyncGetPerson();
  };
  render() {
    return (
      <div>
        <div>
          <label htmlFor="userName">用户名:</label>
          <input
            type="text"
            id="userName"
            name="userName"
            onChange={this.changeHandler}
          />
        </div>
        <div>
          <label htmlFor="age">年龄</label>
          <input
            type="text"
            id="age"
            name="age"
            onChange={this.changeHandler}
          />
        </div>
        <div>
          <button onClick={this.btnAdd}>添加</button>
          <button onClick={this.asyncGetPerson}>异步获取值</button>
        </div>
        <hr />
        <ul>
          {this.props.personList.map((item, index) => {
            return (
              <li key={item.id}>
                {item.userName}==={item.age}
              </li>
            );
          })}
        </ul>
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    personList: state.person.persons,
  };
}
function mapDispathToProps(dispatch) {
  return {
    addPeron: (data) => dispatch(addPerson(data)),
    //异步分发，分派
    asyncGetPerson: () => dispatch(getPersonApi()),
  };
}
export default connect(mapStateToProps, mapDispathToProps)(Person);

用力页面效果如下: