第56节——redux-toolkit中的createAction——了解

一、概念

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 不需要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 (<div><div>{state.name} - {state.age}</div><button onClick={() => dispatch(ageAdd())}>age + 1</button><inputtype="text"onChange={(event) => dispatch(updateName(event.target.value))}/></div>);
}