Получить определение типа для props.dispatch () для использования TypeScript с React-Redux - PullRequest
Новая
       15

Получить определение типа для props.dispatch () для использования TypeScript с React-Redux

0 голосов
/ 18 февраля 2020

У меня есть этот функциональный компонент / компонент без состояния: 

import React from 'react';
import {useFormik} from 'formik';
import {connect} from "react-redux";

function mapStateToProps(){
  return {
     foo: "bar"
  }
}

interface OwnProps {
  propFromParent: number
}


type StateProps = ReturnType<typeof mapStateToProps>
type Props = StateProps & OwnProps


const SignupForm = (props: Props) => {


  const formik = useFormik({
    initialValues: {
      email: '',
      name: '',
      password: ''
    },
    onSubmit(values) {
      props.dispatch()   // props.dispatch is not defined!
    }
  });

  return (
    <form onSubmit={formik.handleSubmit}>
      <label htmlFor="name">Full Name</label>
      <input
        id="name"
        name="name"
        type="name"
        onChange={formik.handleChange}
        value={formik.values.name}
      />
      <button type="submit">Submit</button>
    </form>
  );
};

export default connect<StateProps, null, Props>(mapStateToProps)(SignupForm);

, поэтому я получаю эту ошибку компиляции:

enter image description here

Итак, как я могу включить определение типа, чтобы был определен props.dispatch? Просто ищу помощи с правильными определениями TS.

Ответы [ 2 ]

0 голосов
/ 18 февраля 2020

Пожалуйста, смотрите документацию React-Redux по "Stati c Typing" , в которой показано, как обрабатывать определение правильных типов для того, что connect будет передаваться в ваш компонент.

В частности, мы рекомендуем использовать помощник ConnectedProps<T>, например: 

import { connect, ConnectedProps } from 'react-redux'

interface RootState {
  isOn: boolean
}

const mapState = (state: RootState) => ({
  isOn: state.isOn
})

const mapDispatch = {
  toggleOn: () => ({ type: 'TOGGLE_IS_ON' })
}

const connector = connect(
  mapState,
  mapDispatch
)

// The inferred type will look like:
// {isOn: boolean, toggleOn: () => void}
type PropsFromRedux = ConnectedProps<typeof connector>

interface Props extends PropsFromRedux {
  backgroundColor: string
}

const MyComponent = (props: Props) => (
  <div style={{ backgroundColor: props.backgroundColor }}>
    <button onClick={props.toggleOn}>
      Toggle is {props.isOn ? 'ON' : 'OFF'}
    </button>
  </div>
)

export default connector(MyComponent)
0 голосов
/ 18 февраля 2020

Вам необходимо добавить новую функцию и передать ее в connect () в качестве второго аргумента 

...
function mapDispatchToProps(dispatch): IDispatchProps {
 return {
  dispatch
 };
}

connect(mapStateToProps, mapDispatchToProps)
...