react-redux 中state改变，页面未重新渲染

红太狼 2021-09-19 13:26 699阅读 0赞

# #

## **1.问题?** ##

在redux中，通过reducer来对state的进行更新，但是我在reducer中改变了state的值，但是页面没有重新渲染，并且在控制台输出显示state的值已经改变

### 代码： ###

## **2.原因** ##

reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。保持 reducer 纯净非常重要。

**永远不要在 reducer 里做这些操作：**

修改传入参数；
    执行有副作用的操作，如 API 请求和路由跳转；
    调用非纯函数，如 Date.now() 或 Math.random()。

**Store 会把两个参数传入 reducer： 当前的 state 和 action**，所以不能直接修改state，redux会比较新旧state的值，直接修改state会导致store内部的也发生改变，那么新旧state也就没有发生变化。页面就不会重新渲染。

## **3.解决方法** ##

*  **不要修改 state**。 使用`Object.assign()`新建了一个副本。

### 例子 ###

function todoApp(state = initialState, action) {
      switch (action.type) {
        case SET_VISIBILITY_FILTER:
          return Object.assign({}, state, {
            visibilityFilter: action.filter
          })
        default:
          return state
      }
    }