redux之reducer 为什么必须是纯函数?

在一个应用中,所有的 state 都是以一个对象树的形式存在一个单一的 store 中,唯一改变 state 的办法就是触发 action,而 reducer 就是用来编写专门的函数决定每个 action 如何改变应用的 state 。

redux之reducer 为什么必须是纯函数?_第1张图片
在 Redux store 中保存了 reducer 返回的 这个 state,这个新的 store 树就是应用的下一个 state, 所有订阅 store.subscribe(listener)的监听器都将被调用,监听器里可以调用 store.getState()获得当前 state 此时,我们就可以使用新的 state 来更新 UI setState(newState)

如果 reducer 不是纯函数会发生什么? 我们将上面代码reducer改造一下,直接修改 state,而不是返回新的 state

redux之reducer 为什么必须是纯函数?_第2张图片
改变代码后,我们发现当我们触发了 action 以后,页面没有发生任何变化

redux 源码如下:
redux之reducer 为什么必须是纯函数?_第3张图片
通过查看源代码,我发现,var nextStateForKey = reducer(previousStateForKey, action), nextStateForKey就是通过 reducer 执行后返回的结果(state),然后通过hasChanged = hasChanged || nextStateForKey !== previousStateForKey来比较新旧两个对象是否一致,这个比较法,比较的是两个对象的存储位置,也就是浅比较法,所以,当我们 reducer 直接返回旧的 state 对象时,Redux 认为没有任何改变,从而导致页面没有更新。

你可能感兴趣的:(前端,javascript,开发语言)