React-redux with Flow - имя типа действия из импортированной константы - PullRequest
0 голосов
/ 20 февраля 2019

Я использую Flow для проверки типов в приложении React, использующем Redux, и мне нужно проверить форму действий в редукторах, в зависимости от типа действия, как описано здесь: https://flow.org/en/docs/react/redux/

код редуктора:

import { ADD_USER, DELETE_USER } from './actionTypes'

type State = {
  users: { [userId: number]: { name: string, age: number } }
};  // exact State shape is not important for this case

type Action = 
  |{ type: ADD_USER, user: {name: string, age: number} }
  |{ type: DELETE_USER, userId: number };

function reducer(state: State, action: Action): State {
  switch(action.type) {
    case ADD_USER:
      return { ...state, users: { ...state.users, action.user } };

    case DELETE_USER:
      const { action.userId, ...newUsers } = state.users
      return { ...state, users: newUsers };

    default:
      return state;
  }

И это не работает, выдавая ошибку потока Cannot get 'action.userId' because property 'userId' is missing in object type.

Когда я определяю типы действий как константы в одном и том же файле, проверка типов работает:

// import { ADD_USER, DELETE_USER } from './actionTypes'

const ADD_USER = 'ADD_USER';
const DELETE_USER = 'DELETE_USER';

type State = {
  users: { [userId: number]: { name: string, age: number } }
};  // exact State shape is not important for this case

type Action = 
  |{ type: ADD_USER, user: {name: string, age: number} }
  |{ type: DELETE_USER, userId: number };

function reducer(state: State, action: Action): State {
  switch(action.type) {
    case ADD_USER:
      return { ...state, users: { ...state.users, action.user } };

    case DELETE_USER:
      const { action.userId, ...newUsers } = state.users
      return { ...state, users: newUsers };

    default:
      return state;
  }

Импорт имен типов действий в виде строковых констант необходим, потому что они также импортируются в создатели действий, так что все они сохраняются в одном файле actionTypes.js (в некотором роде стандартный подход с response-redux).

Какможно ли выполнить проверку типа потока с помощью несвязанных объединений с импортированными константами?

1 Ответ

0 голосов
/ 21 февраля 2019

Я думаю, что нужно сделать несколько вещей.

1) Добавить типы к типам действий в actionTypes.js.Убедитесь, что типы действий назначены следующим образом:

const ADD_USER: 'ADD_USER' = 'ADD_USER';
const DELETE_USER: 'DELETE_USER' = 'DELETE_USER';

2) В аннотации к типу действия в коде редуктора убедитесь, что используются типы, а не значения типов действий, как показано ниже:

import { ADD_USER, DELETE_USER } from './actionTypes'

type Action = 
  |{ type: typeof ADD_USER, user: {name: string, age: number} }
  |{ type: typeof DELETE_USER, userId: number };

3) Убедитесь, что весь другой код является допустимым JavaScript, так как users: { ...state.users, action.user } и { action.userId, ...newUsers } = state.users не выглядят как законный способ выполнить деструктуризацию и создание нового объекта.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...