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

1.问题?

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

1

代码：

const defaultState = {

count: 0,

help: '123s',

};

const count = (state = defaultState, action) => { // 同学们可以使用count来实现一个计数器以巩固知识。

switch (action.type) {

case 'ADD':

state.count += 1;

return state;

case 'REDUCE':

state.count -= 1;

return state;

default:

return state;

}

};

在这里我在页面显示了initStore中的两条内容，删除一条，但页面没有并没有重新渲染

2.原因

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

1

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

修改传入参数；

执行有副作用的操作，如 API 请求和路由跳转；

调用非纯函数，如 Date.now() 或 Math.random()。

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

3.解决方法

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

例子

const defaultState = {

count: 0,

help: '123s',

};

const count = (state = defaultState, action) => { // 同学们可以使用count来实现一个计数器以巩固知识。

switch (action.type) {

case 'ADD':

return assgin({}, state, {

count: state.count + 1,

});

case 'REDUCE':

return assgin({}, state, {

count: state.count - 1,

});

default:

return state;

}

};

也可以使用 ES7 中还在试验阶段的特性 { ...state, ...newState }，参考 对象展开语法。

修改后的代码：

export default function (state = initStore, action) {

switch (action.type) {

case 'DELETE':

state.splice(action.index,1);

return [...state];

}

}