Redux减速机 - 关于状态变化

Question

我想将特定reducer的当前状态保存到会话存储中，而不是在每个操作上显式调用它。

const { handleActions } = require("redux-actions");

// How do i make this logic run on any state change without adding it to every action?
const onStateChange = (state) => sessionStorage.save(keys.myReducer, state);

const myReducer = handleActions
({
     [Actions.action1]: (state, action) => (
         update(state, {
             prop1: {$set: action.payload},
         })
     ),
     [Actions.action2]: (state, action) => (
         update(state, {
             prop2: {$set: action.payload},
         })
     )
 },
 //****************INITIAL STATE***********************
 {
     prop1: [],
     prop2: []
 }
);

有没有办法捕获特定减速器的状态更改事件？

我知道store.subscribe ，但那是整个商店，我说的是听一个特定的减速器更改

谢谢

Answer 1

遗憾的是，您无法观看商店的特定部分，因为您的商店实际上只是减速器（combineReducers返回一个大型减速器）。 也就是说，您可以通过状态部分比较手动检查减速器是否已更改。

let previousMyReducer = store.getState().myReducer;
store.subscribe(() => {
  const { myReducer } = store.getState();
  if (previousMyReducer !== myReducer) {
    // store myReducer to sessionStorage here
    previousMyReducer = myReducer;
  }
})

Answer 2

您可以使用redux-saga来侦听特定操作，并在触发时保留存储（以及执行其他操作）。 这似乎非常适合您的需求。

它与特定的商店更改并不完全相关，而是与一组操作相关联。 但是，我认为这个模型（倾听动作，而不是状态变化）更适合redux设计。

好消息是你不必更改传奇之外的任何代码。 我已经使用这个来自动保存表单数据并且效果很好。

这是一个设置一个saga以坚持一些redux-form动作的例子; 请注意，它不仅限于坚持 - 你可以在传奇期间做任何你想做的事情。

function* autosaveSaga(apiClient) {
  yield throttle(500,
  reduxFormActionTypes.CHANGE,
    saveFormValues,
    apiClient);

  yield takeLatest(
    reduxFormActionTypes.ARRAY_PUSH,
    saveFormValues,
    apiClient);

  yield takeLatest(
    reduxFormActionTypes.ARRAY_POP,
    saveFormValues,
    apiClient);
 }

如果您想要监听所有操作类型，或者自定义过滤哪些操作会激活您的持久性代码，您可以传递模式或匹配函数来获取最新：

   yield takeLatest(
    '*',
    saveFormValues,
    apiClient);

更多关于您可以通到什么take ， takeLatest等，可以发现在文档的take 。