@15gifts/redux-wiretap 中文文档教程

Question

Redux Wiretap

redux-wiretap 是一个 Redux 中间件，它允许您在操作到达您的位置时监视它们店铺。 这允许您在不更改应用程序逻辑的情况下对应用程序的状态做出反应 - 例如，向跟踪 API 发出请求。

Install

npm i @15gifts/redux-wiretap

Usage

将库导入您的存储文件并将其作为最后一个元素添加到您的中间件数组中。

import { applyMiddleware, createStore } from 'redux';
import reduxWiretap from '@15gifts/redux-wiretap';
import reducers from './reducers';

const initialState = {};
const wiretapConfig = {};
const wiretap = reduxWiretap(wiretapConfig);

const store = createStore(reducers, initialState, applyMiddleware(wiretap));

Config

传递给 reduxWiretap 函数的配置可以包含以下属性：

{
  // A function that always gets called before an action is executed
  beforeAnyAction: (contextVariables) => {},

  // A function that gets called before `callback` if the `point` is valid
  beforeCallback: (data, contextVariables) => {},

  // A function that will get called if the `point` is valid
  callback: (data, contextVariables) => {},

  // A function that gets called after `callback` if the `point` is valid
  afterCallback: (data, contextVariables) => {},

  // A function that always gets called after an action is executed
  afterAnyAction: (contextVariables) => {},

  // Default value for global variables that are passed between callback functions
  vars: {},

  // Array of point config objects that decide if the `callback` function is called
  points: [
    {
      // The action(s) to look for (this can be an array of strings)
      triggerAction: 'ACTION_TYPE',
      logic: (contextVariables) => {
        return {
          // This can be anything - passed as the first argument into the callbacks
          data: {},
          // This boolean controls if the callback is executed (defaults true)
          shouldFire: true,
        };
      },
    },
  ],
}

contextVariables

该对象被传递给每个点的 logic 函数和所有回调函数。 它具有以下属性：

{
  action, // The current action
  config, // The config passed into the `reduxWiretap` function at the start
  nextState, // The store as it will be after the action is applied
  prevState, // The store as it was before the action was applied
  getVars(), // Function to get the global variables
  setVars(vars), // Function to set the global variables
}

getVars and setVars

这些函数允许您读取和更新在回调函数之间传递的全局变量。 初始值取自开始时传入的 config ，如果省略该字段，则为空对象。

...

const wiretap = reduxWiretap({
  vars: { id: 1 },
  callback: ({ getVars, setVars }) => {
    const vars = getVars();
    const id = vars.id + 1;

    setVars({ ...vars, id });
  },
  points: [{ triggerAction: 'COUNTER_INCREMENT' }],
});

...

// vars = { id: 1 }

store.dispatch({ type: 'COUNTER_INCREMENT' });

// vars = { id: 2 }

shouldFire

此属性由点配置对象的 logic 函数返回，决定是否调用回调。 因为它可以访问 contextVariables，所以您可以执行诸如比较 redux 存储的上一个和下一个状态以及有条件地调用回调函数等操作。

{
  points: [
    {
      triggerAction: 'COUNTER_INCREMENT',
      logic: ({ prevState, nextState }) => {
        return {
          callback: () => {
            // Call API to report that an increment greater than 1 has occured
          },
          shouldFire: nextState.counterValue - prevState.counterValue > 1,
        };
      },
    }
  ],
}

Next Steps

我们要添加的下一个功能是：

• [ ] Fire callbacks on simple value changes (non-objects) as an alternative to actions

License

MIT