关于redux中的reducer的两点疑问

Question

1、既然reducer强调不可变数据的概念为何不直接返回一个深拷贝之后的state,例如_.cloneDeep2、既然不能直接更改state，为何不利用Object.freeze,或者类似的方法让state不可改变import { SET_BOOKS, ADD_BOOK, REMOVE_BOOK, CHANGE_BOOK_PRICE } from '../actions/book.js'const initBooks = []const books = (state, action) => {    if (state === undefined) {        state = initBooks    }    //或者运用性能更好的_.cloneDeep    let tmpBooks = JSON.parse(JSON.stringify(state))    switch (action.type) {        case SET_BOOKS:            return action.books            break        case ADD_BOOK:            // return [...state,action.newBook]            tmpBooks.push(action.newBook)            return tmpBooks            break        case REMOVE_BOOK:            return state.filter(item => {                return item.id !== action.bookId            })            break        case CHANGE_BOOK_PRICE:            tmpBooks.forEach(item => {                if(item.id===action.bookId){                    item.price=action.newPrice                }            });            return action.books            break        default:            return state    }}export default books

Answer 1

问题1： 每次深拷贝是可以的，但是会浪费性能，因为不管你做了任何操作都会创立一个新的对象，特别是内容很多的对象，内存占用负担很大。
问题2：你说的没错，就是可以用Object. freeze来保证immutable，这也是很多轻量级的immutable库内部的实现方式，可以看 seamless-immutable，immutable-helper这类库。

题外话，immutable 保证了 reducer 在内部数据变化后，返回一个新对象，用处是判断两次数据时，只需要进行一次 reference 判断，而不用 deepEqual 判断，从而节省性能开销。

Answer 2

不知道我跟你想的一不一样，可以看下combineReducers的源码：

var hasChanged = false

    var nextState = {}

    for (var i = 0; i < finalReducerKeys.length; i++) {

      var key = finalReducerKeys[i]

      var reducer = finalReducers[key]

      var previousStateForKey = state[key]

      var nextStateForKey = reducer(previousStateForKey, action)

      if (typeof nextStateForKey === 'undefined') {

        var errorMessage = getUndefinedStateErrorMessage(key, action)

        throw new Error(errorMessage)

      }

      nextState[key] = nextStateForKey

      hasChanged = hasChanged || nextStateForKey !== previousStateForKey

    }

    return hasChanged ? nextState : state

关键点在于每次reducer返回新的state会跟旧的state做===对比，如果false认为store改变，从而触发页面重绘，如果true，则认为不变，不会触发重绘。所以reducer返回新的state是为了通知redux让页面重绘。