рассылка: рассылка <AnyAction>почему иногда вам нужно уточнять действие? - PullRequest
Новая
       0

рассылка: рассылка <AnyAction>почему иногда вам нужно уточнять действие?

0 голосов
/ 04 марта 2020

У меня проблема, возможно потому, что я пытаюсь что-то новое с машинописью (type redux stuff),

Это мое сообщение об ошибке: Argument of type '(dispatch: Dispatch<AnyAction>) => Promise<string>' is not assignable to parameter of type 'AnyAction'. Property 'type' is missing in type '(dispatch: Dispatch<AnyAction>) => Promise<string>' but required in type 'AnyAction'. TS2345

Дело в том, что я надеваю Я действительно не понимаю, почему я получил эту ошибку, потому что typeScript просто выдает ошибку на этом, а не на другом, поэтому я весьма озадачен.

Мой код (с ошибкой): 

/Action/userAction.js
___________________________________________________
export const signOut = () => async (dispatch: Dispatch) => {
  try {
    dispatch(UserSignoutAction());
    dispatch(InitialErase());
    dispatch(signOutSessionInitial());
    dispatch(isLogout());
    persistor.flush();
    return "done";
  } catch (e) {
    const error = await e;
    throw error;
  }
};

/NavBar/container.js
_______________________________________________
const mapDispatchToProps = (
  dispatch: Dispatch
): {
  signOut: () => Promise<String>;
} => ({
  signOut: () => dispatch(signOut()),
});

В этом примере выдается ошибка, которую я могу исправить с помощью signOut: () => dispatch<any>(signOut()), Я могу понять, что мне нужно набрать диспетчеризацию нормально (но не знаю, что мне нужно, но в настоящее время именно поэтому я ставлю любую)

прочее код (без ошибок): 

/Action/userAction.js
___________________________________________________
export const sessionInitial = (
  session_id: number
): sessionInitialActionOption => ({
  type: SESSION,
  payload: session_id
});

/Dashboard/container.js
_______________________________________________
const mapDispatchToProps = (
  dispatch: Dispatch
): {
  sessionInitial: (
    session_id: number
  ) => {
    type: string;
    payload: number;
  };
} => ({
  sessionInitial: (session_id: number) => dispatch(sessionInitial(session_id))
});

Полагаю, моя ошибка в том, что я хотел бы выполнить более одной Actions Creator через функцию. Я думаю, что это не очень хороший способ сделать это, или это решение нормально, но смешно помещать / звонить внутрь mapDispatchToProps.

Спасибо за помощь в понимании того, как работает эта часть, это довольно сложно.

___________________________ Решение? ____________________________

Я нашел решение, благодаря подсказке Хасана Накви! Следующий код работает для меня: 

const mapDispatchToProps = (
  dispatch: ThunkDispatch<
    void,
    void,
    | UserActionsType            //one of my actionsType
    | sessionActionsType         //one of my actionsType
    | isConnectActionsType       //one of my actionsType
    | initialUserActionsType     //one of my actionsType
  >
): {
  signOut: () => void;
} => ({
  signOut: () => dispatch(signOut())
});

или 

type ApplicationDispatch = ThunkDispatch<IStoreState, void, AnyAction> & Dispatch

const mapDispatchToProps = (
  dispatch: ApplicationDispatch
): {
  signOut: () => void;
} => ({
  signOut: () => dispatch(signOut())
});

export default compose<any>(
  withRouter,
  connect(mapStateToProps, mapDispatchToProps)
);

Я не очень понимаю, почему это работает, а не шаг выше ... Но я все равно попытаюсь понять почему redux-thunk? и почему Dispatch из redux недостаточно (возможно, потому что actionsType включен / отправлен с функцией ThunkDispatch), почему бы просто не заменить 'any' signOut: () => dispatch<any>(signOut()) на actionsType? (не работает для меня)

В чем разница между Dispatch и ThunkDispatch?

Спасибо всем за чтение этого поста, надеюсь, я прочитаю несколько постов, которые изменят мою жизнь! будьте снисходительными парнями. Хорошего дня!

enter image description here

- Как вы видели выше, когда вы используете redux-thunk для обработки асинхронных действий, действие достигает Самая внутренняя функция, actionFunction, которая отвечает за выполнение действия. Но эта диспетчеризация - это то, что мы создаем в промежуточном программном обеспечении, и это не диспетчеризация из createStore, который имеет прослушиватели и передает значения редуктору.

- Отправка редуктору происходит из его родительской функции, которая is nextFunction.

(источник: https://medium.com/@gethylgeorge / понимание-how-redux-thunk-works-72de3bdebc50 )

другая полезная ссылка: https://daveceddia.com/what-is-a-thunk/

Так что, если я действительно понимаю, что происходит, ThunkDispatch может выполнять fct, asyn c fct или нет, за исключением Dispatch. Диспетчер звонит Actions Creator на редукторы.

Если я пропущу, пойми что-нибудь, скажи мне, и я исправлю это.

Надеюсь, это тебе немного поможет!

1 Ответ

1 голос
/ 04 марта 2020

Проблема в том, что вы используете тип Dispatch для первого аргумента в mapDispatchToProps.

Поскольку вы используете redux-thunk, вам нужно использовать тип ThunkDispatch, импортированный из redux-thunk.

Таким образом, ваш NavBar / container.ts должен стать: 

import { AnyAction } from "redux";
import { ThunkDispatch } from 'redux-thunk';

// ApplicationState is the shape of your redux store.
// You can use any but its recommended to have a specified shape
// This should ideally be in a different file since it could be needed in many places
interface ApplicationState {
   username: string;
   userId: string;
}

// Use ApplicationDispatch everywhere instead of Dispatch
type ApplicationDispatch = ThunkDispatch<ApplicationState, void, AnyAction> & Dispatch

const mapDispatchToProps = (
  dispatch: ApplicationDispatch
): {
  signOut: () => Promise<String>;
} => ({
  signOut: () => dispatch(signOut()),
});
...