如何将JS Flow类型与Redux reducers和lodash一起使用？

Question

我可以输入我的动作，初始状态和简单缩减器，但是当reducer返回包含lodash（第三方实用程序库）的状态切片时，Flow似乎无法检测到它：

设置：

// @flow
import _ from 'lodash'
import constants from './constants';

type initialStateType = {
  authenticating: boolean,
  authenticated: boolean,
  goals: Array<?Object>,
  user: Object
}

type genericAction = {
  type: string,
  goals?: Array<?Object>,
  data?: Object | Array<mixed>,
  user?: Object,
  goalId?: ?number,
  status?: boolean,
}

export const initialState: initialStateType = {
  authenticating: false,
  authenticated: false,
  goals: [],
  user: {},
};

与flow一起使用的reducer案例：

export function globalReducer(state: initialStateType = initialState, action: genericAction) {
  switch (action.type) {
    // Authentication
    case constants.AUTHENTICATING:
      return Object.assign({}, state,
        {
          authenticating: action.status,
        }
      );
...
    case constants.USER_EDITED:
    case constants.USER_FETCHED:
      return Object.assign({}, state,
        {
          user: action.user,
        }
    );

不适用于流程的减速机案例：

case constants.GOAL_CREATED:
      return Object.assign({}, state,
        {
          goals: _.concat(state.goals, action.data),
        }
      );
...
 case constants.GOAL_DELETED:
  return Object.assign({}, state,
    {
      goals: _.filter(state.goals, (value, index) => {
        return value.id !== action.goalId;
      }),
    }
  );

使用Nuclide作为我的文本编辑器，内置了流支持，flow强调了这一行，＆＃39;目标：_. concat（state.goals，action.data），＆＃39;带有黄色信息，说明类型覆盖范围，不包含在流量中。

如何为使用lodash的这些代码行获得正确的流量覆盖？

Answer 1

您需要为lodash安装库定义，否则Flow无法知道它的用途。

最简单的方法是通过flow-typed。该页面上的说明应足以让您入门。基本上，它是一个工具，可以找到npm包的用户提供的库定义，并将它们放在您的存储库中，以便Flow可以使用它们。