web-dev-qa-db-ja.com

Redux接続のmapStateToPropsの正しい型宣言（TypeScript 2）

Reduxストアがあり、接続したいと思います。これが私のコンテナコンポーネントからの抜粋です：

interface IProps  {
  states: IAppState;
  actions: IAppProps;
}
// mapping state to the props
const mapStateToProps = ( state: IAppState, ownProps = {} ) => ({
  states: state
});
// mapping actions to the props
const mapDispatchToProps = ( dispatch: Redux.Dispatch<IAppState> ) => ({
  actions: Redux.bindActionCreators( actions, dispatch )
});

// connect store to App
@connect<IAppState, IAppProps, any>(
  mapStateToProps,
  mapDispatchToProps
)
export default class App extends React.Component<IProps, {}> {
//...
}

コンパイルすると、次の問題が発生します。

error TS2345: Argument of type '(state: IAppState, ownProps?: {}) => { states: IAppState; }' is not assignable to parameter of type 'MapStateToPropsParam<IAppState, any>'.
  Type '(state: IAppState, ownProps?: {}) => { states: IAppState; }' is not assignable to type 'MapStateToPropsFactory<IAppState, any>'.
    Type '{ states: IAppState; }' is not assignable to type 'MapStateToProps<IAppState, any>'.
      Type '{ states: IAppState; }' provides no match for the signature '(state: any, ownProps?: any): IAppState'.

MapStateToPropsインターフェースを公開する@types/react-redux @ 4.4.44を使用しています。私のmapStateToPropsはこのインターフェースに直面していると思います...それでも何かがおかしいです。それは何のアイデアですか？

reactjsreact-reduxtypescript2.0
7
Dmitry Sheiko

_@types/react-redux_はmapStateToPropsを受け入れて、取り込んだのとまったく同じタイプを返すようです。_{ states: AppStateTree }_のように、マッピング中に小道具用に変更したかったのです。代わりに、状態ツリーcombineReducers({ states: myReducer })を変更しました。したがって、このコードは正常に機能します。

_interface IRootState {
  state: IAppState;
}

const mapStateToProps = ( state: IRootState ) => state;

const mapDispatchToProps = {
  toggleOpenAddFeed
};

type IProps = IRootState & typeof mapDispatchToProps;

class App extends React.Component<IProps, {}> {
 render() {
    return (
      <div className="main-wrapper">
         <Mycomponent store={this.props} />
      </div>
    );
  }
}

export default connect( mapStateToProps, mapDispatchToProps )( App );
_
2
Dmitry Sheiko

ownPropsにはタイプがありません。あなたはそれにタイプを与えなければなりません。

const mapStateToProps = ( state: IAppState, ownProps: any = {} )
2
Ematipico