凡科建站后属于自己的网站吗,网站设计培训班询,免费给我推广,用邮箱地址做网站域名好吗一、RTK的简介
1、官网地址
Redux Toolkit: 概览 | Redux 中文官网
2、Redux toolkit是什么
Redux Toolkit 是 Redux 官方强烈推荐#xff0c;开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式#xff0c;我们强烈建议你使用它。
它包括几个…一、RTK的简介
1、官网地址
Redux Toolkit: 概览 | Redux 中文官网
2、Redux toolkit是什么
Redux Toolkit 是 Redux 官方强烈推荐开箱即用的一个高效的 Redux 开发工具集。它旨在成为标准的 Redux 逻辑开发模式我们强烈建议你使用它。
它包括几个实用程序功能这些功能可以简化最常见场景下的 Redux 开发包括配置 store、定义 reducer不可变的更新逻辑、甚至可以立即创建整个状态的 “切片 slice”而无需手动编写任何 action creator 或者 action type。它还自带了一些最常用的 Redux 插件例如用于异步逻辑 Redux Thunk用于编写选择器 selector 的函数 Reselect 你都可以立刻使用。
二、RTK入门使用
1、安装依赖
yarn add react-redux
yarn add reduxjs/toolkit
2、目录结构
|-src|-store|-modules|-shopcartList.js|-counter.js|-index.js
3、创建slice切片
位置:src/store/modules/counter.js
import {createSlice} from reduxjs/toolkit
const countercreateSlice({//命名空间name值会作为action type的前缀name:counter,//初始化状态initialState:{count:0},//定义reducer更新状态的函数reducers:{increment(state,action){state.countstate.countaction.payload},subtraction(state,action){state.countstate.count-action.payload}}
})
//导出action函数
export const {increment,subtraction}counter.actions
//导出reducer
export default counter.reducer
4、创建store
位置src/store/index.js
import {configureStore} from reduxjs/toolkit
import counter from ./modules/counter
const storeconfigureStore({reducer:{counter}
})
export default store
5、在入口集成redux
import {Provider} from react-redux
import store from ./store;
const root ReactDOM.createRoot(document.getElementById(root));
root.render(Provider store{store}App/App/Provider
);
6、在组件中获取和更新状态
import React from react
import {useSelector,useDispatch} from react-redux
import {increment} from ../store/modules/counter
export default function Counter() {const numuseSelector((state){console.log(state,state);return state.counter.count})const dispatchuseDispatch()const add(n){dispatch(increment(n))}return (divh1计数器/h1div{num}/divbutton onClick{(){add(2)}}/button/div)
}
三、RTK异步操作 编写异步方法
位置:src/store/modules/counter.js
export const subtractionAsync(payload){return async(dispatch,getState){console.log(dipatch,dispatch);console.log(getState,getState());setTimeout(() {dispatch(subtraction(payload))}, 4000);}
} 在组件中调用
import React from react
import {useSelector,useDispatch} from react-redux
import {subtractionAsync} from ../store/modules/counter
export default function Counter() {const numuseSelector((state){return state.counter.count})const dispatchuseDispatch()const jian(n){dispatch(subtractionAsync(n))}return (divh1计数器/h1div{num}/divbutton onClick{(){jian(3)}}异步-/button/div)
}
