【问题标题】:How to use JS Flow types with Redux reducers and lodash?如何将 JS Flow 类型与 Redux reducers 和 lodash 一起使用?
【发布时间】:2017-04-25 06:20:07
【问题描述】:

我可以输入我的操作、我的初始状态和普通的 reducer,但是当 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: {},
};

适用于流的减速器案例:

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 作为内置流支持的文本编辑器,流在“目标:_.concat(state.goals, action.data)”行下划线,并带有一条黄色消息,指出类型覆盖,流未覆盖。

如何为这些使用 lodash 的代码行获得适当的流覆盖?

【问题讨论】:

    标签: javascript reactjs types redux flowtype


    【解决方案1】:

    你需要为lodash安装库定义,否则Flow无法知道它的作用。

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

    【讨论】:

    猜你喜欢
    • 2020-01-08
    • 2019-03-28
    • 2021-08-06
    • 1970-01-01
    • 1970-01-01
    • 2014-07-14
    • 2018-10-09
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多