Redux-DOM not refreshed

szhshp

发布于 2022-09-21 10:26:41

1180

发布于 2022-09-21 10:26:41

Why My DOM not refreshed?

Why My DOM not refreshed?

We all know that if state changed then DOM will refresh, if we dispatched an action but the DOM not refreshed, definitely you triggered side effect.

Here is a debug checklist:

Did you trigger CORRECT ACTION?
Did you dispatched CORRECT ACTION TYPE?
Do you have some async/await combined with TRY/CATCH and the errors are catched?
Check the redux debug extension to see the diff of that action
Then, possibly you changed the state DIRECTLY in reducer...
1. Did you used shallow clone instead of deep clone in reducer?
2. Spread operator will do shallow clone, did you use that?

Example

Common Mistakes when utilizing spread operator

const rv = (state === undefined) ? defaultState : { ...state };
switch (action.type) {
  case LOGIN_ERROR:
    /* 
        Spread Operator only do shallow copy here
    the grand child are still referenced to state

    that means: after spread operator, rv.loginPage.msg === state.loginPage.msg
    */
  /* YOU ARE CHANGING STATE DIRECTLY  */
    rv.loginPage.msg = {
      ...state.loginPage.msg,
      ...action.data,
    }
    return rv;
}

Best Practise

const rv = (state === undefined) ? defaultState : { ...state };
switch (action.type) {
  case LOGIN_ERROR:

    /*
    spread the object for each generation 
    */
    rv.loginPage = {
      ...state.loginPage, /* we spreaded the child */
      msg: {
        ...state.loginPage.msg, /* we spreaded the grandchild */
        ...action.data,
      },
    };
        
    return rv;
}

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020-02-03，如有侵权请联系 cloudcommunity@tencent.com 删除

action