Usage with redux-saga

I use redux-saga. Currently, I have to define a type in addition to my action:

export type CreateUserRequestedAction = Action<
  ActionTypeKeys.CreateUserRequested,
  User
>;

export const createUserRequested = createAction(
  ActionTypeKeys.CreateUserRequested,
  resolve => (user: User): CreateUserRequestedAction => resolve(user),
);

I need this CreateUserRequestedAction type to use this later in my saga for the action parameter:

export function* userEditSaga(action: CreateUserRequestedAction) {
  try {
    // define type explicitly because of lack of return types of generators:
    // https://github.com/redux-saga/redux-saga/issues/1286#issuecomment-482866473
    const fetchedUser: User = yield call(userEditRequest, {
      firstName: 'john',
      lastName: 'doe',
    });
    yield put(createUserSucceeded(fetchedUser));
  } catch (error) {
    yield put(createUserFailed());
  }
}

export const userSagas = [
  takeLatest(ActionTypeKeys.CreateUserRequested, userEditSaga),
];

Is there a better solution for this or do I need this type to gain type-safety and autocompletion in my userEditSaga?

Thank you in advance!

Kind regards Nico

[the-dr-lazy]

Hi @npeham

There is a type helper called ActionType that can be used to infer action type that wrapped in given action creator/reducer.

https://github.com/thebrodmann/deox/blob/3fbdfd25500922410ceeff8d7eff95d1b6e5a780/src/types.ts#L35-L39

Also, there is a helper function named getType which returns the type property of an action that wrapped in given action creator.

https://github.com/thebrodmann/deox/blob/3fbdfd25500922410ceeff8d7eff95d1b6e5a780/src/get-type.ts#L1-L13

According to the above helpers, your example can be re-write in the following way to hide all that type verbosity:

import { createActionCreator, getType, ActionType } from 'deox'

export const createUserRequested = createActionCreator(
  'CREATE_USER_REQUESTED',
  resolve => (user: User) => resolve(user),
);

export function* userEditSaga(action: ActionType<typeof createUserRequested>) {
  // ...
}

export const userSagas = [
  takeLatest(getType(createUserRequested), userEditSaga)
]

[SantoJambit]

Yeah, I guess it makes it more readable. Thanks.