Как написать createAction из redux-toolkit, чтобы не получать ошибок

Мне нужно ввести некоторые реквизиты и аргументы. Вот часть кода. Как мне правильно написать createAction?

const onSubmitHandler = (userFormData: TuserDataFromForm) => {
  console.log("this work");
  // here is error - userFormData
  dispatch(asyncAction(userFormData));
};


function* watchFunc() {
  // here is error - asyncAction.type
  yield takeEvery(asyncAction.type, workFunc);
}


// What should I write instead of any
// to not get error here - dispatch(asyncAction(userFormData)) - in Component
// and here - takeEvery(asyncAction.type, workFunc) - in sagas
const asyncAction: any = createAction("ASYNC_ACTION");

Вот полный код:

https://codesandbox.io/s/saga-redux-toolkit-actions-reducers-of-slices-2f7tx?file=/src/redux/actions.ts


typescript redux-toolkit saga
person HackerMF    schedule 31.12.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Типы инструментов redux написаны с мыслью, что вы не должны определять их самостоятельно.

Напишите

const asyncAction = createAction<TuserDataFromForm>("ASYNC_ACTION");

Здесь нет смысла указывать тип переменной.

В будущем, пожалуйста, проверьте документацию по API в будущем - она ​​почти полностью доступна в TypeScript.

Что касается использования в саге, сделайте одно из

  yield takeEvery(asyncAction, workFunc);
// or
  yield takeEvery(asyncAction.match, workFunc);

Вы также можете взглянуть на typed-redux-saga, поскольку она намного лучше интегрируется с TS:

import { take } from "redux-saga/effects";

function* exampleSaga() {
  // cannot be inferred and needs to be manually typed
  const action: IncrementActionType = yield take(slice.actions.incrementBy);
}

vs:

import { take } from "typed-redux-saga";

function* exampleSaga() {
  // correctly inferred as { payload: number; type: string; }
  const action = yield* take(slice.actions.incrementBy);
}
person phry    schedule 02.01.2021
comment
Да, я недавно нашел ответ, что мне следует вводить только здесь const asyncAction = createAction ‹TuserDataFromForm› (ASYNC_ACTION); спасибо за подробный ответ Я бы хотел проголосовать, но у меня недостаточно репутации - person HackerMF; 02.01.2021
comment
Принять ответ как правильный должно быть нормально;) - person phry; 02.01.2021