内江移动网站建设,wordpress 文章id,知名网站建设公司,aspnet东莞网站建设简单使用
1、下载
npm i reduxjs/toolkit react-redux
2、创建 1、在redux/user.js中创建模块user。从reduxjs/toolkit中引入createSlice创建模块片段#xff0c;我们需要传入name、初始数据initialState、改state的reducers等。最后需要导出reducer和action。
代码如下reduxjs/toolkit react-redux
2、创建 1、在redux/user.js中创建模块user。从reduxjs/toolkit中引入createSlice创建模块片段我们需要传入name、初始数据initialState、改state的reducers等。最后需要导出reducer和action。
代码如下
import { createSlice } from reduxjs/toolkitconst userSlice createSlice({name: user, //action.type和reducer的名字表现在控制台的调试器上一般与模块同名//初始数据initialState: {age: 18},reducers: {// reducers中存放用于修改state的方法changeAge(state, action) {state.age action.payload //传过来的数据存放在action.payload上}}
})export const { changeAge } userSlice.actions //需要把action导出dispatch需要
export default userSlice.reducer //导出reducer用于创建Store 2、在redux/index.js中引入configureStore用于创建Store还需要引入user模块的reducer完成创建。代码如下
import { configureStore } from reduxjs/toolkit
import userReducer from ./userconst Store configureStore({reducer: {user: userReducer //模块名reducer}
})export default Store3、在index.js中与之前一样引入Provider传入Store。
import React from react
import ReactDOM from react-dom/clientimport App from ./App
import Store from ./redux
import { Provider } from react-redux
const root ReactDOM.createRoot(document.getElementById(root))
root.render(// 将store传入context,这样任何组件都能访问Store,而不需要在组件中手动引入StoreProvider store{Store}App //Provider
)3、使用
在jsx文件中dispatch的是前面user模块文件导出的action。代码如下
import React from react
import { changeAge } from ./redux/user
import { useDispatch, useSelector } from react-redux
export function About() {const dispatch useDispatch()const age useSelector((state) state.user.age)function addAge() {dispatch(changeAge(age 1))}return (div年龄{age}button onClick{addAge}增加/button/div)
}
export default About异步操作createAsyncThunk
简单方式 在redux/uset.js文件中定义一个action方法用于修改state。在导出这个方法的后面引入createAsyncThunk创建thunk方法。在这个方法的回调中会接收store我们可以在请求到数据之后触发dispatch完成state的修改具体代码如下
import { createAsyncThunk, createSlice } from reduxjs/toolkitconst userSlice createSlice({name: user, //action.type和reducer的名字表现在控制台的调试器上一般与模块同名//初始数据initialState: {data: []},reducers: {setData(state, { payload }) {state.data payload}}
})export const { setData } userSlice.actions //需要把action导出dispatch需要
// 在导出action的下方定义thunk方法
export const getDataThunk createAsyncThunk(user/getData, async (id, store) {let res await fetch(http://localhost:3000/data.txt?id${id})res await res.json()store.dispatch(setData(res))
})
export default userSlice.reducer //导出reducer用于创建Store使用就是正常的dispatch这个thunk import { getDataThunk} from ./redux/userawait dispatch(getDataThunk()) //因为返回promise我们可以await这样就是同步的啦
其他方式 另外的方法是先定义好thunk方法然后在slice配置对象中使用extraReducers函数函数接收builder利用builder.addCase添加回调完成对state的修改。 代码如下【但是我觉得上面的写法更简单】
// 利用createAsyncThunk创建异步action第一个参数是 action名 ,第二个参数是回调用于请求接口用promise返回数据
export const fetchUser createAsyncThunk(fetchUser, async (userId) {let res await fetch(http://123.207.32.32:8000/home/multidata)res await res.json()return res
})
{name:user,initialState:{//...},reducer:{//...},extraReducers: (builder) {builder// .addCase(fetchUser.pending, (state) {// state.loading true;// }).addCase(fetchUser.fulfilled, (state, action) {state.list action.payload})// .addCase(fetchUser.rejected, (state, action) {// state.loading false;// state.error action.payload;// });},// 下面的写法有警告
/* extraReducers: {[fetchUser.pending](state, action) {// state.list action.payload// 做一些加载转圈的操作console.log(pending);},[fetchUser.fulfilled](state, action) {state.list action.payload},[fetchUser.rejected](state, action) {// state.list action.payloadconsole.log(rejected);}} */
} END
redux有关的知识暂时总结完毕。
