ошибка типа с redux-thunk при использовании connect - PullRequest
Новая
       6

ошибка типа с redux-thunk при использовании connect

0 голосов
/ 11 мая 2018

Я использую Redux и Redux-Thunk с машинописью.Я пытаюсь внедрить в компонент через connect () простой создатель Thunk Action, используя mapDispatchToProps.

Действия 

export enum TestActionTypes {
  THUNK_ACTION = "THUNK_ACTION"
}

export interface ThunkAction {
  type: TestActionTypes.THUNK_ACTION;
}

export type TestAction = ThunkAction;

Создатели действий 

export function thunkActionCreator() {
  return function(dispatch: Dispatch<any>) {
    dispatch({ type: TestAction.THUNK_ACTION });
  };

Подключенный компонент 

interface DemoScreenState {}

interface OwnProps {}

interface StateProps {}

interface DispatchProps {
  testThunk: () => void;
}

type DemoScreenProps = StateProps & DispatchProps & OwnProps;

class DemoScreen extends React.Component<
  DemoScreenProps,
  DemoScreenState
> {
  constructor(props: DemoScreenProps) {
    super(props);
  }

  componentDidMount() {
    this.props.testThunk();
  }

  render() {
    return null;
  }
}

function mapStateToProps(state: any): StateProps {
  return {};
}

function mapDispatchToProps(dispatch: Dispatch<any>): DispatchProps {
  return {
    testThunk: () => dispatch(thunkActionCreator())
  };
}

export default connect<StateProps, DispatchProps, OwnProps>(
  mapStateToProps,
  mapDispatchToProps
)(DemoScreen);

Store 

 import { createStore, applyMiddleware } from "redux";
 import rootReducer from "./RootReducer";
 import thunk from "redux-thunk";

 const store = createStore(rootReducer, applyMiddleware(thunk));

 export default store;

Однако при использовании connect () я столкнулся с двумя проблемами.Прежде всего, я получаю ошибку типа для объявления testThunk в mapDispatchToProps.

Аргумент типа '(dispatch: Dispatch) => void' не может быть назначен параметру типа 'Action'.Свойство 'type' отсутствует в типе '(dispatch: Dispatch) => void'. Я не знаю, как с этим справиться, поскольку по определению thunk отличается от простого действия.

* РЕДАКТИРОВАТЬ 24/10/2018 * см. Ответ ниже, используя: 

"@types/react-redux": "^6.0.9",
"react": "16.3.1",
"react-native": "~0.55.2",
"react-redux": "^5.0.7",
"redux": "^4.0.1",
"redux-thunk": "^2.3.0"

1 Ответ

0 голосов
/ 24 октября 2018

Мне наконец-то удалось получить правильно набранный подключенный компонент, в основном используя его в качестве отправной точки https://github.com/reduxjs/redux-thunk/blob/master/test/typescript.ts для правильной типизации асинхронных действий создателя действий.Ключ заключается в том, чтобы правильно ввести ваш магазин и использовать ThunkDispatch и ThunkAction из redux-thunk.

Store.tsx 

import { createStore, applyMiddleware, combineReducers } from "redux";
import { playground, IState } from "./reducer";
import thunk, { ThunkMiddleware } from "redux-thunk";
import { IActions } from "./actions";

export interface RootState {
  playground: IState;
}

export type RootActions = IActions;

const rootReducer = combineReducers({ playground });

const store = createStore<RootState, RootActions, {}, {}>(
  rootReducer,
  applyMiddleware(thunk as ThunkMiddleware<RootState, RootActions>)

Actions.tsx

import { Action } from "redux";
import { ThunkAction } from "redux-thunk";
import { RootState, RootActions } from "./store";

type ThunkResult<R> = ThunkAction<R, RootState, undefined, RootActions>;

//Actions
export enum TestActionTypes {
  THUNK_ACTION = "THUNK_ACTION",
}

export interface AsyncAction extends Action {
  type: TestActionTypes.THUNK_ACTION;
}

export type IActions = AsyncAction;

//Action creator
export function testAsyncActionCreator(): ThunkResult<void> {
  return (dispatch, getState) => {
    console.log(getState);
    dispatch({ type: TestActionTypes.THUNK_ACTION });
  };
}

Reducer.tsx 

import { IActions, TestActionTypes } from "./actions";
import { Reducer } from "redux";

export interface IState {}

const defaultValue: IState = {};

export const playground: Reducer<IState, IActions> = (
  state = defaultValue,
  action
) => {
  switch (action.type) {
    default:
      return state;
  }
};

ConnectedComponent.tsx 

...
import { connect } from "react-redux";
import { RootState, RootActions } from "./redux/store";
import { syncActionCreator, testGetState } from "./redux/actions";
import { ThunkDispatch } from "redux-thunk";

interface OwnProps {}

interface StateProps {}

interface DispatchProps {
  test: () => void;
}

type Props = OwnProps & StateProps & DispatchProps;

class DumbContainer extends React.Component<Props> {
  render() {
    return (
      ...
    );
  }
}


const mapStateToProps = (state: RootState): StateProps => {
  return {
    text: state.playground.text
  };
};

const mapDispatchToProps = (
  dispatch: ThunkDispatch<RootState, undefined, RootActions>
): DispatchProps => {
  return {
    test: () => {
      dispatch(testAsyncActionCreator());
    }
  };
};

export default connect<StateProps, DispatchProps, OwnProps, RootState>(
  mapStateToProps,
  mapDispatchToProps
)(DumbContainer);

Я такжеесть проект детской площадки здесь https://github.com/vbvxx/playground-reactnative-typescript

...