reactjs - 访问 Redux reducer 中状态的其他部分

Question

我正在使用 Redux，并且希望在用户修改数据时在状态中设置一个标志。

首先，我使用服务器上的一些数据来充实我的商店:

let serverData = {toggle: true}
const store = configureStore({data: serverData, originalData: serverData})

然后我有一些 reducer :

function data(state = {}, action) {
  switch (action.type) {
    case TOGGLE:
      return {
        ...state,
        toggle: !state.toggle
      }
    default:
      return state
  }
}

function changed(state = false, action) {
  // This doesn't work; we are actually comparing state.changed.originalData and state.changed.data
  return isEqual(state.originalData, state.data)
}

const rootReducer = combineReducers({
  data,
  originalData: (state={}) => state,
  changed
})

如果state.data不再等于state.originalData，我在这里要做的就是将changed标志设置为true。但是，使用combineReducers，我无法访问我的changed reducer 内的这些部分状态。

最惯用的方法是什么？

Answer 1

米歇尔是对的，用传统的通量术语来扩展它，将 reducer 视为一个存储，您只需将其中一个存储称为“数据”，将另一个存储称为“更改” - 这不是语义，表明您可能对如何存储感到困惑他们被使用了。

您的changed reducer 应该返回未修改的状态，或者，如果执行了它感兴趣的操作，则返回下一个状态。它不是为了确定您的商店是否发生了变化 - 这就是 subscribe 的用途。

const unsubscribe = store.subscribe(() =>
  console.log('store was changed:', store.getState())
)

当你调用combineReducers时，它会调用每个reducer一次，并执行@@redux/INIT操作——但是不用担心，因为它是内部的。需要理解的重要一点是，在每个 reducer 键下，状态都会被初始化。在您的情况下，您将 data 初始化为空对象，changed 为 false，并将 originalData 初始化为空对象。

接下来，当您调用 createStore 时，您说“使用服务器的初始状态更新‘data’和‘originalData’存储”。所以现在“data”和“serverData”存储的状态等于{toggle: true}。

此时两个对象是相同的。

随后，当您调用store.dispatch时，您的所有reducer都将被调用，以便它们有机会在每个reducer键下修改状态(并返回一个新对象)。每个 reducer 只能访问它自己的状态。因此，在您的changed reducer 中，您无法像这样检查整个状态的整体对象相等性。

但是，您可以检查订阅中的对象相等性(此处针对 Chrome 47 混合了 ES5/6)

'use strict';

const serverData = {toggle: true};
const TOGGLE = 'TOGGLE';

function data(state, action) {
    state = state || {};
  switch (action.type) {
    case TOGGLE:
        return Object.assign({}, state, {
        toggle: !state.toggle
      })
    default:
      return state
  }
}

function originalData(state) {
    state = state || {};
  return state;
}

const rootReducer = Redux.combineReducers({
  data,
  originalData
});

const store = Redux.createStore(rootReducer, {data: serverData, originalData: serverData });

const unsubscribe = store.subscribe(() =>
  console.log('on change equal?', store.getState().data === store.getState().originalData)
)

console.log('on load equal?', store.getState().data === store.getState().originalData);

store.dispatch({ type: TOGGLE });

console.log 输出应该是:

on load equal? true
on change equal? false

fiddle :https://jsfiddle.net/ferahl/5nwfqo9k/1/