redux——redux-actions

一、为什么要使用redux-actions

redux-actions是用来简化redux中action的创建和reducer的创建

二、安装

npm install redux-actions --save
// 或
yarn add redux-actions

三、使用

• createAction：用于简化创建一个action创建函数，createAction接收三个参数，第一个参数为action的type值，第二个参数为一个函数，函数的返回值为payload的值，第三个参数为附带的信息
  之前action创建函数的写法：

export const SETLOGIN = Symbol("setLogin");

export function createSetLoginAction(payload) {
  return {
    type: SETLOGIN,
    payload,
  };
}

使用createAction的写法：

import { createActions } from "redux-actions";
export const SETLOGIN = Symbol("setLogin");

export const createSetLoginAction = createAction(
  SETLOGIN,
  (payload) => payload
);

• createActions：用于简化创建多个action创建函数，createActions接收一个对象，对象的对象名为action的type，对象值为一个函数，函数的返回值为payload
  createActions会返回一个对象，对象的属性名为传入的type值改为小驼峰式

import { createActions } from "redux-actions";

export const {setLogin, putTest} = createActions({
  SET_LOGIN: (payload) => payload,
  PUT_TEST: null,
});

• handleAction：用于简化创建只处理单个action的reducer，handleAction接收三个参数，第一个参数为action的type，第二个参数为一个函数，函数的返回值为要改变的的仓库状态state值，最后一个值为仓库的初始状态
  之前reducer的写法：

export default (state = {}, { type, payload }) => {
  switch (type) {
    case "SET_LOGIN":
      return payload;
    default:
      return state;
  }
};

使用handleAction的写法：

import { handleAction } from "redux-actions";
export default handleAction(
  "SET_LOGIN",
  (state, { type, payload }) => {
    return payload;
  },
  100
);

• handleActions：用于简化创建处理多个action的reducer，handleActions接收两个参数，第一个参数为一个对象，对象的属性名为action的type，属性值为要改变的仓库状态state值，第二个参数为仓库的初始状态

import { handleActions } from "redux-actions";
export default handleActions(
  {
    SET_LOGIN: (state, { type, payload }) => payload,
    PUT_TEST: (state, action) => state,
  },
  100
);

• combineActions：配合createActions和handleActions两个函数，用于处理多个action对应同一个reducer
  例如：

import { handleActions } from "redux-actions";
export default handleActions(
  {
    SET_LOGIN: (state, { type, payload }) => payload,
    PUT_TEST: (state, { type, payload }) => payload,
  },
  100
);

这两个action都对应同一个reducer，这时候就能使用combineActions

import { handleActions, combineActions } from "redux-actions";

const combine = combineActions("SET_LOGIN", "PUT_TEST");
export default handleActions(
  {
    combine: (state, { type, payload }) => payload,
  },
  100
);

把两个action合并返回一个新的函数。