Redux减速机 - 关于状态变化

时间:2017-10-08 08:36:56

标签: javascript reactjs redux state

我想将特定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,但这是针对整个商店,我说的是听取特定的减速器更改

由于

2 个答案:

答案 0 :(得分:3)

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

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

答案 1 :(得分:0)

您可以使用redux-saga侦听特定操作,并在触发时保留商店(并执行其他操作)。这似乎非常适合您的需求。

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

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

这是一个设置传奇以坚持少数还原形式动作的例子;请注意,它不仅限于坚持 - 你可以在传奇期间做任何你想做的事情。

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等可以找到in the docs for take