西安做网站-西安网站建设-西安网站制作-西安网络公司_千秋网络,网络服务包括,18网站推广,德州市建设街小学官方网站React 基础巩固(三十五)——ReduxToolKit (RTK)
一、RTK介绍 Redux Tool Kit #xff08;RTK#xff09;是官方推荐的编写Redux逻辑的方法#xff0c;旨在成为编写Redux逻辑的标准方式#xff0c;从而解决上面提到的问题。 RTK的核心API主要有如下几个#xff1a; confi…React 基础巩固(三十五)——ReduxToolKit (RTK)
一、RTK介绍 Redux Tool Kit RTK是官方推荐的编写Redux逻辑的方法旨在成为编写Redux逻辑的标准方式从而解决上面提到的问题。 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初始化值reducersreducer函数对象类型可添加多个createSlice返回值是一个对象包含所有的actions createAsyncThunk接受一个动作类型字符串和一个返回承诺的函数并生成一个pending/fulfilled/rejected基于该承诺分派动作类型的thunk。
二、RTK的简单使用 安装 toolkit 和 react-redux npm install reduxjs/toolkit react-redux利用 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; 利用configureStore 配置storestore/index.js import { configureStore } from reduxjs/toolkit;import counterReducer from ./features/counter;const store configureStore({reducer: {counter: counterReducer,},
});export default store; 利用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.StrictModeProvider store{store}App //Provider// /React.StrictMode
); 利用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 (divhome:{counter}button onClick{(e) this.addNumber(5)}5/buttonbutton onClick{(e) this.addNumber(8)}8/buttonbutton 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 (divprofile:{counter}button onClick{(e) this.subNumber(5)}-5/buttonbutton 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); 将界面引入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 (divh2App Counter: {counter}/h2div classNamepagesHome /Profile //div/div);}
}const mapStateToProps (state) ({counter: state.counter.counter
});export default connect(mapStateToProps)(App); 查看运行结果和之前单独使用react-redux的效果一致但在代码层面上化繁为简
