Question

我想以键值对的形式将每个reducer的数据保存在localStorage中

UserReducer: {isLoding: true, ....}
OrderReducer : {isRecieved: false, ....}

因此，如果任何化合器中发生任何更改，我都希望在本地存储中设置更新的数据。我在想什么是可以进行store.subscribe的，但是我如何知道哪个reducer已更改，因此我可以将整个reducer数据设置为localStorage。需要帮忙。谢谢：）

Answer 1

您可以创建一个redux中间件，该中间件将在每次调度动作时被触发。在中间件中，您可以进行条件检查以查看上一个存储和下一个存储是否相同。如果没有，则可以更新本地存储。

我发现this对创建中间件很有帮助。而且相当容易。

Answer 2

我认为您不知道store.subscribe中的更改。

您知道更改是操作的最后一个地方。

您可以将持久性逻辑应用于化简器。但也许您不希望在减速器中引入副作用。

因此，如果排除第一个，基本上可以有两个选择。

将整个存储作为单个对象保留到本地存储。这是更简单的选择。我将首先尝试此解决方案，并在最坏的情况下测量开销。
制作Redux中间件并捕获各个操作。您可以复制reducer模式以仅保留已更改的对象。

您可以将subscribe用于选项2。您可以将中间件用于选项2和选项3。

我又提出了一个解决方案。

您可以使用Redux Thunk或Redux Saga在动作创建者中进行保存。

Answer 3

您可以为此使用React Component。将其连接到商店，并使用它写入localStorage而不呈现任何内容。恕我直言，写起来要比中间件容易。

Answer 4

一种实现方法是创建一个lastAction减速器，该减速器将存储最后调度的动作的值。然后在store.subscribe中，您可以执行以下操作：

    let nextState = store.getState();
    let dispatchedAction = nextState.lastAction.type;

当您知道上次分派的操作时，可以根据该操作类型来更新本地存储。

Answer 5

您可以使用redux-watch来收听redux存储中的更改

例如

// ... other imports/requires
import watch from 'redux-watch'

// assuming you have an admin reducer / state slice
console.log(store.getState().admin.name) // 'JP'

// store is THE redux store
let w = watch(store.getState, 'admin.name')
store.subscribe(w((newVal, oldVal, objectPath) => {
  console.log('%s changed from %s to %s', objectPath, oldVal, newVal)
  // admin.name changed from JP to JOE
}))

// somewhere else, admin reducer handles ADMIN_UPDATE
store.dispatch({ type: 'ADMIN_UPDATE', payload: { name: 'JOE' }})

这可能会对您有所帮助。

Answer 6

我想扩展@PeterAmbruzs 分享的方法 3。实际上我面临的问题是每当有一个动作被调度时，store 不会立即更新，但我仍然想坚持它，所以我导入了 reducer 并将状态和动作传递给它以获得所需的下一个状态

import reducer from './reducer'

const someMiddleware = store => next => action => {
    const state = store.getState(),
    const nextState = reducer(state, action)
    
    // Save it to Local Storage
    // Or Make an API Call to save it to server        

    next(action)
}

检测Redux存储更改

6 个答案: