redux-actions

Redux常用辅助库

redux-actions

redux-actions是一个辅助快速构建标准的Flux Action的工具集，也提供了快速构建Reducer的接口。可以使用npm进行安装使用：

npm install --save redux-actions

import { createAction, handleAction, handleActions } from "redux-actions";

createAction(type, payloadCreator = Identity, ?metaCreator)

将一个Action Creator封装成一个标准的Flux Action构造器，如果没有传入任何的Payload Creator，那么会使用默认的函数，基本的使用例子如下：

let increment = createAction("INCREMENT", (amount) => amount);
// same as
increment = createAction("INCREMENT");

expect(increment(42)).to.deep.equal({
  type: "INCREMENT",
  payload: 42,
});

如果传入的payload是一个Error Object，redux-actions会自动将 action.error 设置为true:

const increment = createAction("INCREMENT");

const error = new TypeError("not a number");
expect(increment(error)).to.deep.equal({
  type: "INCREMENT",
  payload: error,
  error: true,
});

handleAction(type, reducer | reducerMap, ?defaultState)

handleAction函数可以将Reducer封装为处理标准的Flux Actions的函数，如果传入的是单个的Reducer的话，那可以用来处理正常的Actions与错误的Actions，用法大概是这个样子的：

handleAction('FETCH_DATA', {
  next(state, action) {...}
  throw(state, action) {...}
});

第三个参数指向了默认的state。

handleActions(reducerMap, ?defaultState)

handleActions即等效于利用handleAction函数创建多个Reducers然后组合成一个单独的Reducer来处理多个Actions。与标准的Redux中的Reducer的写法相比，其优势在于能够以扁平化的方式编写代码：

const reducer = handleActions(
  {
    INCREMENT: (state, action) => ({
      counter: state.counter + action.payload,
    }),

    DECREMENT: (state, action) => ({
      counter: state.counter - action.payload,
    }),
  },
  { counter: 0 }
);

reselect

import { createSelector } from "reselect";

const shopItemsSelector = (state) => state.shop.items;
const taxPercentSelector = (state) => state.shop.taxPercent;

const subtotalSelector = createSelector(shopItemsSelector, (items) =>
  items.reduce((acc, item) => acc + item.value, 0)
);

const taxSelector = createSelector(
  subtotalSelector,
  taxPercentSelector,
  (subtotal, taxPercent) => subtotal * (taxPercent / 100)
);

export const totalSelector = createSelector(
  subtotalSelector,
  taxSelector,
  (subtotal, tax) => ({ total: subtotal + tax })
);

let exampleState = {
  shop: {
    taxPercent: 8,
    items: [
      { name: "apple", value: 1.2 },
      { name: "orange", value: 0.95 },
    ],
  },
};

console.log(subtotalSelector(exampleState)); // 2.15
console.log(taxSelector(exampleState)); // 0.172
console.log(totalSelector(exampleState)); // { total: 2.322 }

redux-mock-store

redux-mock-store常用于对Redux进行单元化测试。

最近更新于0001-01-01