Как заставить типизированные действия работать с редукс-логическим преобразованием? - PullRequest
Новая
       38

Как заставить типизированные действия работать с редукс-логическим преобразованием?

1 голос
/ 27 апреля 2019

Redux-logic предоставляет метод, называемый transform, который позволяет преобразовывать действия до того, как они достигнут редукторов.Это полезно для различных ситуаций.Как правило, я хочу отправить действие, которое имеет только мой пользовательский ввод, и иногда моему редуктору потребуются вспомогательные данные для выполнения обновления состояния.

Итак, я могу сделать это в процессе преобразования логики-редукции,но это похоже на конфликт с типами безопасных действий (которые я также использую).Как я могу сказать машинописи, что мои действия преобразуются до того, как они достигнут редуктора?

Представьте, что я отправляю с полезной нагрузкой типа { userName: string }, но мой процесс преобразования добавляет свойство, поэтому я получаю { userName: 'John Doe', recordId: 9 }.

Ответы [ 2 ]

0 голосов
/ 17 июля 2019

есть пакет со стандартным типом действия https://github.com/redux-utilities/flux-standard-action

и redux-logic предоставляют https://github.com/jeffbski/redux-logic/blob/master/definitions/action.d.ts, который является интерфейсом действия, который мы должны использовать

0 голосов
/ 27 апреля 2019

Я новичок в машинописи, но понял, что знаю, как это решить.

В редукторе мы обычно импортируем типы действий, это выглядит так: 

// actions.ts
import { action } from 'typesafe-actions';
import actionTypes from './actionTypes';

export const someAction = (data) = action(
  actionTypes.SOME_ACTION_TYPE,
  { data },
);

// reducer.ts
import { ActionType } from 'typesafe-actions';
import { StateSlice } from './types';
import * as actions from './actions';

const initialState: StateSlice = { ... };

const reducer = (state = initialState, action: ActionType<typeof actions>): StateSlice => {
  ...
};

Таким образом, чтобы обновить это, чтобы принимать действия, которые были изменены промежуточным программным обеспечением с избыточной логикой, мы должны сообщить машинописному шрифту, что тип расширен.Это выглядит так: 

// actions.ts
import { action } from 'typesafe-actions';
import actionTypes from './actionTypes';

export const someAction = (data) = action(
  actionTypes.SOME_ACTION_TYPE,
  { data },
);

// reducer.ts
import { ActionType } from 'typesafe-actions';
import { StateSlice, SOME_TYPE } from './types';
import * as actions from './actions';

type OriginalAction = ActionType<typeof actions.someAction>;
interface MutatedAction1 extends OriginalAction {
  payload: OriginalAction['payload'] & {
    thingWeAddedInReduxLogic: SOME_TYPE;
  };
}

// repeat for other actions, then use a union type like this

type MutatedActionType = MutatedAction1 | MutatedAction2 | ... ;

const initialState: StateSlice = { ... };

const reducer = (state = initialState, action: MutatedActionType): StateSlice => {
  ...
};

Это сокращенная версия реального кода, который мне удалось заставить работать.Надеюсь, это кому-то помогло.

...