第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 不需要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>
  );
}