相关疑难解决方法(0)

我在弄清楚如何正确键入Redux容器时遇到了一些麻烦.

考虑一个简单的表示组件,可能如下所示:

interface MyProps {
  name: string;
  selected: boolean;
  onSelect: (name: string) => void;
}
class MyComponent extends React.Component<MyProps, {}> { }

从这个组件的角度来看,所有道具都是必需的.

现在我想编写一个容器,将所有这些道具拉出状态:

function mapStateToProps(state: MyState) {
  return {
    name: state.my.name,
    selected: state.my.selected
  };
}

function mapDispatchToProps(dispatch: IDispatch) {
  return {
    onSelect(name: string) {
      dispatch(mySelectAction(name));
    }
  };
}

const MyContainer = connect(
  mapStateToProps,
  mapDispatchToProps
)(MyComponent);

这是有效的,但是有一个很大的打字问题:映射函数(mapStateToProps和mapDispatchToProps)没有保护它们提供正确的数据来实现MyProps.这容易出错,拼写错误和重构不佳.

我可以使映射函数返回类型MyProps:

function mapStateToProps(state: MyState): MyProps { }

function mapDispatchToProps(dispatch: IDispatch): MyProps { } …

我试图制作一个传递给react-redux connect函数的组件.该组件如下:

interface ITestProps {
  id: number
}

class TestComponent extends React.Component<ITestProps, {}> {
  render() {
    return (<div>
      {this.props.name}
    </div>)
  }
}

mapStateToProps(state) {}
mapDispatchToProps(dispatch) {}

let ConnectedComponent = connect(
  mapStateToProps,
  mapDispatchToProps
)(TestComponent)

如果我ConnectedComponent像这样渲染,上面的代码似乎工作

<ConnectedComponent></ConnectedComponent>

即没有id道具.不应该抛出错误,因为ConnectedComponent它只是连接形式,TestComponent并且TestComponent应该有表格的道具ITestProps.这是它应该如何表现或我做错了什么.

我爱上了TypeScript,直到我发现Redux-Form与React-Redux之间存在一些非常令人沮丧的不兼容性.

我的目标是reduxForm使用react-redux connect装饰器包装一个装饰组件- 这种模式在babel配置中一直对我有用,并且似乎遵循HOC方法.这是一个例子:

import * as React from 'react';
import { Dispatch } from 'redux';
import { connect } from 'react-redux';
import { reduxForm, Field, InjectedFormProps } from 'redux-form';

interface SampleFormData {
  username: string;
}

interface SampleFormProps {
  saveData: (data: SampleFormData) => void;
}

type AllSampleFormProps = SampleFormProps & InjectedFormProps<SampleFormData>;

const SampleForm: React.SFC<AllSampleFormProps> = (props) => (
  <form onSubmit={props.handleSubmit(props.saveData)}>
    <Field name="username" component="input" />
  </form>
);

const DecoratedSampleForm = reduxForm<SampleFormData>({ form: "sampleForm" })(SampleForm);

export default …

首先，我对 TS、React 和 Redux 非常陌生，如果这是一个明显的问题，我很抱歉。

我正在尝试修改此示例以获取加载某些信息的表单。它正在使用redux-form。

我试图找出如何调用connect，并redux-form在组件的出口的同时。现在它看起来像这样：

class UserForm extends React.Component<IUserProps, void> { .. }

export default ReduxForm.reduxForm({
  form: 'user',
  fields: [
    'userName',
    'password',
    'firstName',
    'lastName',
    'email'
  ],
  validate: UserForm.validate,
})(UserForm);

我在没有 TS 的情况下看到的示例如下所示：

class MyForm extends Component {}
MyForm = reduxForm(config)(MyForm)
MyForm = connect(mapStateToProps, mapDispatchToProps)(MyForm)
export default MyForm

但是如果我尝试在 TS 中做同样的事情，我会收到 TS2300 错误：重复标识符。

我也尝试过使用@connect装饰器，但我无法让它工作（或在网上找到任何工作示例）。