房城乡建设部门户网站,域名如何备案教程,天猫交易网站,综合性门户网站有哪些一、概念
createAction 是一个用于创建 Redux action creator 的函数#xff0c;它可以让你更快地编写 Redux 相关的代码#xff0c;并且更加易于阅读和维护。
二、简单示例
使用 createAction#xff0c;你只需要传入一个字符串类型的 action type#xff0c;然后它会返…一、概念
createAction 是一个用于创建 Redux action creator 的函数它可以让你更快地编写 Redux 相关的代码并且更加易于阅读和维护。
二、简单示例
使用 createAction你只需要传入一个字符串类型的 action type然后它会返回一个新的函数这个函数就是 Redux action creator。当你调用这个新的函数时它会返回一个包含 type 属性的普通 JavaScript 对象这个对象就是 Redux 中的 action。
import { createAction } from reduxjs/toolkitconst increment createAction(counter/increment)// 使用新的action creator
dispatch(increment()) // { type: counter/increment }三、使用createAction的好处
在实际使用中createAction 的最大优点在于它可以自动创建 FSAFlux Standard Action规范的 action即一个带有 type、payload 和 error 属性的 action。这使得我们在编写 Redux 相关的代码时可以更加标准化和规范化同时也能够更好地与其他库和工具集成。
import { createAction } from reduxjs/toolkitconst addTodo createAction(todos/add, (text) ({payload: { text }
}))// 使用新的action creator
dispatch(addTodo(Buy milk)) // { type: todos/add, payload: { text: Buy milk } }四、实际例子
1、创建reducers目录并创建user.js文件
import { createReducer } from reduxjs/toolkit;const userReducer createReducer({age: 1,name: 张三,},(builder) {builder.addCase(user/ageAdd, (state, action) {state.age 1;}).addCase(user/updateName, (state, action) {state.name action.payload.name;});}
);export default userReducer;2、创建actions目录并创建user.js文件
import { createAction } from reduxjs/toolkit;/*** 接收两个参数* 第一个参数 要调用reducer的名字* 第二参数 是一个方法接收调用时传过来的参数* 返回一个payload的对象*/
export const ageAdd createAction(user/ageAdd, () {return {payload: {},};
});export const updateName createAction(user/updateName, (name) {return {payload: {name,},};
});3、在configureStore中挂载
import { configureStore, createReducer } from reduxjs/toolkit;
import userReducer from ./reducers/user;export const countReducer createReducer({num: 1,},{/*** 接收两个参数* param {} state 当前的状态* param {*} action 页面上传过来的状态*/add: (state, action) {// 在这里面可以直接修改state 不需要returnstate.num 1;},}
);const store configureStore({// reducer: countReducer,reducer: userReducer,
});export default store;4、页面中使用
import { useSelector, useDispatch } from react-redux;
import { ageAdd, updateName } from ./store/actions/user;export default function LearnReduxToolkit() {const state useSelector((state) state);const dispatch useDispatch();return (divdiv{state.name} - {state.age}/divbutton onClick{() dispatch(ageAdd())}age 1/buttoninputtypetextonChange{(event) dispatch(updateName(event.target.value))}//div);
}
