【前端知识】React 基础巩固(三十五)——ReduxToolKit (RTK)

React 基础巩固(三十五)——ReduxToolKit (RTK)

一、RTK介绍

1. Redux Tool Kit （RTK）是官方推荐的编写Redux逻辑的方法，旨在成为编写Redux逻辑的标准方式，从而解决上面提到的问题。

2. RTK的核心API主要有如下几个：

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

     参数	描述
     reducer	将slice中的reducer组成一个对象传入此处
     middleware	传入中间件
     devTools	是否配置devTools工具，默认为true

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

     参数	描述
     name	用户标记slice的名次
     initialState	初始化值
     reducers	reducer函数，对象类型，可添加多个
     createSlice	返回值是一个对象，包含所有的actions

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

二、RTK的简单使用

1. 安装 toolkit 和 react-redux

   npm install @reduxjs/toolkit react-redux
   

2. 利用 createSlice 构建store分片（store/features/counter.js）

   import { createSlice } from "@reduxjs/toolkit";// createSlice(用户标记slice的名称， )
   const counterSlice = createSlice({name: "counter",initialState: {counter: 989,},reducers: {addNumber(state, {payload}) {console.log("add number", payload);state.counter = state.counter + payload;},subNumber(state, {payload}) {console.log("sub number", payload);state.counter = state.counter - payload;},},
   });export const { addNumber, subNumber } = counterSlice.actions;export default counterSlice.reducer;

3. 利用configureStore 配置store（store/index.js）

   import { configureStore } from "@reduxjs/toolkit";import counterReducer from "./features/counter";const store = configureStore({reducer: {counter: counterReducer,},
   });export default store;

4. 利用react-redux，依照往常的做法，将store注入index.js

   import React from "react";
   import ReactDOM from "react-dom/client";
   import { Provider } from "react-redux";
   import App from "./App";
   import store from "./store";const root = ReactDOM.createRoot(document.getElementById("root"));
   root.render(// <React.StrictMode><Provider store={store}><App /></Provider>// </React.StrictMode>
   );

5. 利用react-redux，依照往常的做法，在需要使用store及dispatch操作的页面文件中通过connect进行连接

   // Home.jsx
   import React, { PureComponent } from "react";
   import { connect } from "react-redux";
   import { addNumber } from "../store/features/counter";export class Home extends PureComponent {addNumber(num) {this.props.addNumber(num);}render() {const { counter } = this.props;return (<div>home:{counter}<button onClick={(e) => this.addNumber(5)}>+5</button><button onClick={(e) => this.addNumber(8)}>+8</button><button onClick={(e) => this.addNumber(18)}>+18</button></div>);}
   }const mapStateToProps = (state) => ({counter: state.counter.counter,
   });const mapDispatchToProps = (dispatch) => ({addNumber(num) {dispatch(addNumber(num));},
   });export default connect(mapStateToProps, mapDispatchToProps)(Home);

   // Profile.jsx
   import React, { PureComponent } from "react";
   import { connect } from "react-redux";
   import { subNumber } from "../store/features/counter";export class Profile extends PureComponent {subNumber(num) {this.props.subNumber(num);}render() {const { counter } = this.props;return (<div>profile:{counter}<button onClick={(e) => this.subNumber(5)}>-5</button><button onClick={(e) => this.subNumber(8)}>-8</button></div>);}
   }const mapStateToProps = (state) => ({counter: state.counter.counter,
   });const mapDispatchToProps = (dispatch) => ({subNumber(num) {dispatch(subNumber(num));},
   });export default connect(mapStateToProps, mapDispatchToProps)(Profile);

6. 将界面引入App.jsx

   import React, { PureComponent } from "react";
   import { connect } from "react-redux";
   import Home from "./pages/Home";
   import Profile from "./pages/Profile";
   import "./style.css";export class App extends PureComponent {render() {const { counter } = this.props;return (<div><h2>App Counter: {counter}</h2><div className="pages"><Home /><Profile /></div></div>);}
   }const mapStateToProps = (state) => ({counter: state.counter.counter
   });export default connect(mapStateToProps)(App);

7. 查看运行结果，和之前单独使用react-redux的效果一致，但在代码层面上化繁为简