一、概念
createAction 是一个用于创建 Redux action creator 的函数,它可以让你更快地编写 Redux 相关的代码,并且更加易于阅读和维护。
二、简单示例
使用 createAction,你只需要传入一个字符串类型的 action type,然后它会返回一个新的函数,这个函数就是 Redux action creator。当你调用这个新的函数时,它会返回一个包含 type 属性的普通 JavaScript 对象,这个对象就是 Redux 中的 action。
import { createAction } from '@reduxjs/toolkit'
const increment = createAction('counter/increment')
// 使用新的action creator
dispatch(increment()) // { type: 'counter/increment' }
三、使用createAction的好处
在实际使用中,createAction 的最大优点在于它可以自动创建 FSA(Flux Standard Action)规范的 action,即一个带有 type、payload 和 error 属性的 action。这使得我们在编写 Redux 相关的代码时,可以更加标准化和规范化,同时也能够更好地与其他库和工具集成。
import { createAction } from '@reduxjs/toolkit'
const 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 不需要return
state.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 (
<div>
<div>
{state.name} - {state.age}
</div>
<button onClick={() => dispatch(ageAdd())}>age + 1</button>
<input
type="text"
onChange={(event) => dispatch(updateName(event.target.value))}
/>
</div>
);
}