redux Array in state got undefined after reducer finish

Question

I'm working on a project that use react-redux for front side. and there is a problem I already solve, but I can't figure it out why. can someone give me the idea?

problem is, I init my "guidelineManagement" state below(it's in guidelineManagement.js):

    const init = {
      page: 'GuidelineTableComponent',
      status: null,
      msg: [],
      error: null,
      guidelineData: [],
      data: []
    }

and I have another reducer handling login status, it in 'login.js'. I use combineReducers to combine two reducer.

now, In every page loading, I'll do an action "fetchLoginStatus", it load login status from server, and reducer handle in login.js ,

so, in guidelineManagement reducer, it will perform default case.

my perform look like this

default:
  console.log({...state})
  return {...state}

but when I check the logger after "fetchLoginStatus" finish, the state become below:

before fetchLoginStatus :

guidelineManagement:
    data: Array []
    error: null
    guidelineData: Array []
    msg: Array []
    page: "GuidelineTableComponent"
    status: null
    <prototype>: Object { … }

but after fetchLoginStatus finish:

guidelineManagement: 
    data: Array []
    error: null
    guidelineData: Array(3) [ {…}, {…}, {…} ]
    msg: undefined
    page: "GuidelineTableComponent"
    status: "success"
    <prototype>: Object { … }

guidelineManagement.msg become undefined.

and if I change my default case to below, it'll work fine

default:
  console.log({...state})
  return state

the result after fetchLoginStatus action become:

guidelineManagement: 
    data: Array []
    error: null
    guidelineData: Array(3) [ {…}, {…}, {…} ]
    msg: Array []
    page: "GuidelineInsertComponent" ​​
    status: "success"
    <prototype>: Object { … }
​

the result is right, msg remain empty array.

btw, console.log in default case says that in use case block, msg is empty array, means that before return, msg is correct.

by the way, in login state, there is a msg array too, in my design, state.msg use to receive server response.

and I've notice that only msg cause this problem. state.guidelineManagement.data and state.guidelineManagement.guidelineData both are array too, and they remain the same state before action finish.

any idea what cause this problem?

Answer 1

OK, after hours of searching and debugging, I figure it out,

it's not about return {...state} , return state nor about many msg in different reducer ( login and guidelineManagement )

it's just a small mistake when I create an action for handling ajax data, and notify react to rerender the page:

export const refreshGuideline = (status, data, msg) => ({
  type:types.GUIDELINE_REFRESH_GUIDELINE_DATA,
  status,
  data
})

and in reducer:

    case types.GUIDELINE_REFRESH_GUIDELINE_DATA:
      state.guidelineData = action.data
      state.status = action.status
      state.msg = action.msg
      return {...state}

action.msg is undefined, so state.guidelineManagement.msg change to undefined...

after change action below, everything work fine.

export const refreshGuideline = (status, data, msg) => ({
  type:types.GUIDELINE_REFRESH_GUIDELINE_DATA,
  status,
  data,
  msg
})

oh, and the reason why logger log before and after fetchLoginStatus action, guidelineManagement.msg is different even if fetchLoginStatus didn't change msg , is just because that refreshGuideline is invoke after an ajax call, and it's asynchronous.....

I just spend all the day search and experience how object assignment and array assignment working...