0

I have a React.js app where I use Redux. I have an action which is supposed to set a value in the reducer's state but it seems like it does not work. I used console.log() to display the action.payload of the action in the reducer and it seems to be received but when I call the reducer in the component where I need it, it does not show.

Here is my code:

Action:

   export const setModeWarning = (warning) => ({
     type: 'MQTT:SET_MODE_WARNING',
     payload:  warning
   });

Reducer:

case 'MQTT:SET_MODE_WARNING':
        console.log("ENTERED")
        console.log(action.payload)
        console.log(initialState.modeWarning)
        return {
            ...state,
            modeWarning:action.payload.warning,
      
        }

Component:

   const {modeWarning} = this.props
    console.log("MODE WARNING")
    console.log(modeWarning)

    const mapStateToProps = (state) => {
    return {
        reconnect:  state.reconnect,
        battery : state.battery,
        mode: state.mode,
        modeMessage:state.modeMessage,
        messageWarning:state.messageWarning,
        updateMessage:state.updateMessage,
        modeWarning:state.modeWarning
    }
  }

  
export default connect(mapStateToProps,null)(InformationScreen)
Fiphe
  • 320
  • 3
  • 18

1 Answers1

1

Make sure the action payload matches the reducer payload

action payload: warning

reducer modeWarning: action.payload // no .warning

or

action payload: { warning }

reducer modeWarning: action.payload.warning

brietsparks
  • 4,776
  • 8
  • 35
  • 69