The problem 'state value is changed to undefined when Redux action is called'

user_13199189 0
Viewed 150

I have problem with changing store's state. I want to set loggedIn and storeNum in login.js but when I call 'changeLoggedIn(true)' and 'setStoreNum(1)', the previously called value is changed to undefined.

Please give me advise to set both value together without undefined.

Thank you.

enter image description here

reducer.js

import { CHANGE_LOGGED_IN, SET_STORE_NUM } from './actions';

const defaultState={
    loggedIn: false,
    storeNum: 0,
  }
const loggedInReducer = ( state = defaultState, action) => {
  switch (action.type) {

    case CHANGE_LOGGED_IN:
      return{
        loggedIn: action.loggedIn
      }

    case SET_STORE_NUM:
      return{
        storeNum: action.storeNum
      }
    default: return state;
  };
};

export default loggedInReducer;

actions.js

export const SET_STORE_NUM = 'SET_STORE_NUM'


export const changeLoggedIn = (loggedIn) => ({
  type: CHANGE_LOGGED_IN,
  loggedIn: loggedIn,
});

export const setStoreNum = (storeNum) => ({
  type: SET_STORE_NUM,
  storeNum: storeNum,
})

login.js

export default connect(
    state => ({
        loggedIn: state.loggedIn,
        storeNum: state.storeNum
    }),
    dispatch => ({
        changeLoggedIn: (loggedIn) => dispatch(changeLoggedIn(loggedIn)),
        setStoreNum: (storeNum) => dispatch(setStoreNum(storeNum))
    })
)(Login);
react-redux reactjs
1 Answers

Thats because you are only returning loggedIn for the CHANGE_LOGIN action.

Return this: 

const loggedInReducer = ( state = defaultState, action) => {
  switch (action.type) {

    case CHANGE_LOGGED_IN:
      return{
        ...state,
        loggedIn: action.loggedIn
      }

    case SET_STORE_NUM:
      return{
        ...state,
        storeNum: action.storeNum
      }
    default: return state;
  };
};

Hope this helps!

user_91190530
Related