Connect multiple redux sub-states to a React component

Question

In my react-redux-typescript app, I have multiple sub-states that form the application state. Application state is as follows.

interface AppState {
    dialogs: DialogState,
    messages: MessageState,
    notifications: NotificationsState,
    errors: ErrorState
    loading: LoadingState,
    status: StatusState;
}

I use connect method for getting one of the sub-states available in a React component as props. But now I have a case where I need two sub-states properties available in a component as its props.
Specifically these parts:

interface LoadingState {
    size: number
    available: boolean
}

interface StatusState {
    name: string
}

Usually, I use the connect method in component Loading as follows:

export default connect(
(state: AppState) => state.loading, actionCreators)(Loading);

The header of the Loading component is:

type LoadingProps = LoadingState & typeof actionCreators;
class Loading extends React.Component<LoadingProps, {}>

If I do that I have properties of the LoadingState interface available as props. But what should I do if I want also properties from the StatusState available as props in the same component?

You might be looking for something like this github.com/reactjs/reselect — Siya Mzam
– Siya Mzam, Commented Dec 5, 2017 at 13:30

alechill · Accepted Answer · 2017-12-05 13:46:41Z

7

First your props need to also expect StatusState

type LoadingProps = LoadingState & StatusState & typeof actionCreators

Then your mapStateToProps function would just need to return an object containing all those properties mapped, easiest way is to use a spread (...) from the state values

export default connect(
  (state: AppState) => ({...state.loading, ...state.status }),
  actionCreators
)(Loading)

answered Dec 5, 2017 at 13:46

alechill

4,56223 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Connect multiple redux sub-states to a React component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related