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;
}