Dev/Javascript/React/Redux
Source Edit History
dispatch action 之后 DOM 没有刷新
文章目录
点击这里访问站长的博客

redux dispatch 后 DOM 不刷新

如果 DOM 没有刷新:

  1. 查看一下是否调用错了 Action
  2. 查看一下是否发送错了 Action Type
  3. 是否有可能因为 async await 的 try catch 将一些错误 catch 了, 从而导致后期代码没有执行
  4. 查看一下是否 Reducer 里面某些逻辑写错了, 比较常见的就是 直接修改了 state
    • 切记如果要操作 state, 最好先深拷贝再进行处理
    • spread operator 是进行浅拷贝的, 所以如果使用的话就需要进行一层一层拷贝
  5. 可以使用 Redux Tools, 查看 diff 标签里面的变化, 看一看这个 action 调用完成之后数据是否改变？

典型的错误示例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const rv = (state === undefined) ? defaultState : { ...state };
switch (action.type) {
  case LOGIN_ERROR:
    /* 
        我们用 spread operator 得了到一个新的 rv
        但是因为spread operator是一种浅拷贝
        我们仅仅拷贝到了 loginPage 这一层
        里面的 msg 依然是引用 state 原来的地址
        因此如果向下方一样这么写实际上是直接修改了 state
        前端不会刷新
    */
    rv.loginPage.msg = {
      ...state.loginPage.msg,
      ...action.data,
    }
    return rv;
}

正确的书写方式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const rv = (state === undefined) ? defaultState : { ...state };
switch (action.type) {
  case LOGIN_ERROR:

    /* 
      这样子连续用两次spread operator
      就创建了一个新的 msg obj, 这样就不会改动到原来的 state, 因此就会导致前端刷新了。
    */
    rv.loginPage = {
      ...state.loginPage,
      msg: {
        ...state.loginPage.msg,
        ...action.data,
      },
    };
        
        
    return rv;
}