CODEWITHSUNDEEP
javascriptreactjsreact-nativeredux
Aaron Balthaser
Aaron Balthaser

Reputation: 2644

Map state to props not updating after Redux

My Redux Store is correctly being updated which can be seen using React Native Debugger. However, the props inside my component are not updating and are undefined.

In my component below you can see I have correctly mapped to the "sessionModerator" reducer. I have verified this and can see the prop when consoling this.props.

Component: 

const mapStateToProps = state => {
    return {
        session: state.screenReducers.session,
        list: state.screenReducers.sessionList,
        sessionUser: state.screenReducers.sessionUser,
        user: state.sharedReducers.user,
        sessionListItem: state.screenReducers.sessionListItem,
        sessionSortOrder: state.sharedReducers.sessionSortOrder,
        sessionModerator: state.sharedReducers.sessionModerator
    };
};

My reducer is added as seen below:

Reducers Index file:

import { reducer as sessionModerator } from './session/reducers/session-moderator';

export const reducers = combineReducers({
    sessionModerator: sessionModerator,
});

Actions File:

import Types from '../../../types';

export const start = () => {
  return {
    type: Types.TYPES_SESSION_MODERATOR_START,
    payload: true
  };
};

export const stop = () => {
  return {
    type: Types.TYPES_SESSION_MODERATOR_STOP,
    payload: false
  };
};

Reducers File:

import Types from '../../../types';

export const reducer = (state = false, action) => {
  switch (action.type) {
    case Types.TYPES_SESSION_MODERATOR_START:
      return action.payload;
    case Types.TYPES_SESSION_MODERATOR_STOP:
      return action.payload;
    default:
      return state;
  }
};

In the below image you can see that the store is updated as the value for sessionModerator is set to "true", but the console of the actual props during the operation is undefined.

enter image description here

What I have tried:

I have tried various things mostly revolving around the structure of my state, for example, I tried adding the boolean inside an actual object and updating the value as an object property but that didn't seem to work. I feel like I am not updating the boolean correctly but haven't been able to figure it out.

Any help would be greatly appreciated. Thank you.

Upvotes: 1

Views: 3818

Answers (1)

Peter Ambruzs
Peter Ambruzs

Reputation: 8223

sessionModerator is in screenReducers in the debugger not in sharedReducers as in your mapStateToProps. Try this one:

const mapStateToProps = state => {
  return {
    session: state.screenReducers.session,
    list: state.screenReducers.sessionList,
    sessionUser: state.screenReducers.sessionUser,
    user: state.sharedReducers.user,
    sessionListItem: state.screenReducers.sessionListItem,
    sessionSortOrder: state.sharedReducers.sessionSortOrder,
    sessionModerator: state.screenReducers.sessionModerator 
  };
};

Upvotes: 3

Related Questions