流类型不适用于匿名函数中的外部作用域变量

Question

I have a type defined for an action dispatched to a reducer:

type RemoveQuestionAction = {
  type: 'REMOVE_QUESTION',
  questionId: number,
  docTypeId: number,
};

type QuestionAction =
  | RemoveQuestionAction
  | ...

The reducer checks the type of each action:

const questions = (
  state : QuestionState = defaultState,
  action : QuestionAction
) : QuestionState => {...};

The field questionId is referenced in a couple of array filters:

  case REMOVE_QUESTION: {

    return {
      ...state,
      byId: state.allIds
                             // Throws error
        .filter(id => id !== action.questionId)
        .reduce((col, id) => ({
          ...col,
          [id]: state.byId[String(id)],
        }), {}),
                                               // Throws error
      allIds: state.allIds.filter(id => id !== action.questionId),
    };    
  }

This throws a type error for action.questionId .

However if the value from the action is placed in a variable, it is happy:

  case REMOVE_QUESTION: {
    let { questionId } = action; // Ok with this

    return {
      ...state,
      byId: state.allIds
        .filter(id => id !== questionId)
        .reduce((col, id) => ({
          ...col,
          [id]: state.byId[String(id)],
        }), {}),
      allIds: state.allIds.filter(id => id !== questionId),
    };    
  }

Why can't I use the action 's value directly?

Here is a REPL .

It performs as expected in the REPL, really strange as I can't see what could be different..

Flow is version 6.23

Answer 1

action.questionId throws an error because of refinement invalidation explained in the doc for type refinement . Flow is not sure whether action is still RemoveQuestionAction or not when the arrow functions that are given to filter() are executed after the refinement by case REMOVE_QUESTION: .

We humans know that filter() immediately executes the given callback function like id => id !== action.questionId so that action cannot be modified at all. However, from flow's perspective, filter() is just a function that takes a callback function as an argument, and the callback function can be executed later like what addEventListener() does. If the callback function can be executed later, there is a chance that action is modified and the type refinement no longer holds. That's why flow invalidates the type refinement of action in such a case.