珠海个人建站模板,南宁手机企业网站定制公司,wordpress内页不收录,网站开发 旅游1 安装
npm install reduxjs/toolkit2 创建store目录
创建store文件夹#xff0c;里面包含入口文件index.jsx#xff0c;以及自定义的reduces方法main.jsx的slices文件夹#xff0c;其中main1.jsx、main2.jsx表示每一个相对独立的reduces数据操作集 store ***slices *****…1 安装
npm install reduxjs/toolkit2 创建store目录
创建store文件夹里面包含入口文件index.jsx以及自定义的reduces方法main.jsx的slices文件夹其中main1.jsx、main2.jsx表示每一个相对独立的reduces数据操作集 store ***slices ******main1.jsx ******main2.jsx ******… ***index.jsx
3 定义store结构
index.jsx在项目入口处引入该文件
import { configureStore } from reduxjs/toolkit
import main1 from ./slices/main1
import main2 from ./slices/main2export const store configureStore({reducer: { main1, main2 }
})export default store
main1.jsx在页面中引入该文件
import { createSlice, createAsyncThunk } from reduxjs/toolkitconst initialState {status: 10,
}export const getRequestFn createAsyncThunk( // 异步接口修改staterequestName,async () {try {// 触发一个请求const { data } await requestApi()return data} catch (err) {console.log(requestName, err)}}
)const mainSlice createSlice({name: main1,initialState,reducers: {increment(state, action) {state.status state.status action.payload},decrement(state, action) {state.status state.status - action.payload},changeValue(state, action) {state.status action.payload},},extraReducers(builder) {builder.addCase(getRequestFn.fulfilled, (state, actions) {if (!actions.payload) returnstate.status actions.payload.status // 赋值为请求的data.status})}
})export const actions mainSlice.actionsexport default mainSlice.reducer
4 使用
在项目入口处引入store/index.jsx 并在需使用store的组件中引入store/slices/main.jsx 项目中的具体使用如下
import React, { memo } from react
import { useSelector, useDispatch } from react-redux
// 这里引入main1的地址main1、main2按需引入
import { actions, getRequestFn } from **/store/slices/main1function Home() {const { status } useSelector(state state.main)const dispatch useDispatch()const handleAdd () {dispatch(actions.increment(1)) // status 11}const handleAssign () {dispatch(actions.changeValue(100)) // status 100}const handleRequest () {dispatch(getRequestFn()) // status request data.status} return divdiv onClick{handleAdd}/divdiv onClick{handleAssign}/divdiv onClick{handleRequest}/div/div
}export default HomeRedux官网
