Correct type declaration for mapStateToProps of Redux connect (TypeScript 2)

Question

I have a Redux store and want to connect it. Here an extract from my container component:

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, {}> {
//...
}

When compiling I receive the following issue:

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'.

I'm using @types/[email protected] that exposes MapStateToProps interface. I would think that my mapStateToProps confronts this interface... Yet something is wrong. Any ideas what is that?

Answer 1

Well, seems like @types/react-redux accepts mapStateToProps to return exact the same type as took in. I wanted it to modify it for props during mapping like { states: AppStateTree }. Instead I've modified the state tree combineReducers({ states: myReducer }). So this code works fine:

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 );