我想将我的状态树的某些部分持久化到localStorage。在什么地方这样做比较合适?减速还是行动?
当前回答
我有点晚了,但是我根据这里的示例实现了一个持久状态。如果你想每X秒更新一次状态,这个方法可以帮助你:
Define a wrapper function let oldTimeStamp = (Date.now()).valueOf() const millisecondsBetween = 5000 // Each X milliseconds function updateLocalStorage(newState) { if(((Date.now()).valueOf() - oldTimeStamp) > millisecondsBetween) { saveStateToLocalStorage(newState) oldTimeStamp = (Date.now()).valueOf() console.log("Updated!") } } Call a wrapper function in your subscriber store.subscribe((state) => { updateLocalStorage(store.getState()) });
在这个例子中,状态最多每5秒更新一次,而不管更新被触发的频率。
其他回答
一句话:中间件。
查看redux-persist。或者自己写。
[更新2016年12月18日]编辑删除提及两个类似的项目现在不活跃或弃用。
减速器从来不是一个合适的地方这样做,因为减速器应该是纯粹的,没有副作用。
我建议只在订阅者中进行:
store.subscribe(() => {
// persist your state
})
在创建存储之前,读取那些持久化的部分:
const persistedState = // ...
const store = createStore(reducer, persistedState)
如果你使用combineReducers(),你会注意到那些没有接收到状态的reducer会像正常启动一样使用默认的state参数值。这非常方便。
建议您取消订阅服务器,这样就不会太快地写入localStorage,否则就会出现性能问题。
最后,您可以创建一个中间件,将其封装为替代方案,但我会从订阅者开始,因为这是一个更简单的解决方案,而且工作做得很好。
我无法回答@Gardezi,但基于他的代码的选项可能是:
const rootReducer = combineReducers({
users: authReducer,
});
const localStorageMiddleware = ({ getState }) => {
return next => action => {
const result = next(action);
if ([ ACTIONS.LOGIN ].includes(result.type)) {
localStorage.setItem(appConstants.APP_STATE, JSON.stringify(getState()))
}
return result;
};
};
const reHydrateStore = () => {
const data = localStorage.getItem(appConstants.APP_STATE);
if (data) {
return JSON.parse(data);
}
return undefined;
};
return createStore(
rootReducer,
reHydrateStore(),
applyMiddleware(
thunk,
localStorageMiddleware
)
);
不同之处在于我们只是保存了一些动作,你可以使用debounce函数来保存你状态的最后一次交互
为了填补Dan Abramov的答案,你可以像这样使用store.subscribe():
store.subscribe(()=>{
localStorage.setItem('reduxState', JSON.stringify(store.getState()))
})
在创建存储之前,检查localStorage并像这样解析键下的JSON:
const persistedState = localStorage.getItem('reduxState')
? JSON.parse(localStorage.getItem('reduxState'))
: {}
然后你像这样将这个perstedstate常量传递给你的createStore方法:
const store = createStore(
reducer,
persistedState,
/* any middleware... */
)
如果任何人对上述解决方案有任何问题,您可以编写自己的解决方案。让我给你看看我做了什么。忽略saga中间件的事情,只关注localStorageMiddleware和reHydrateStore方法。localStorageMiddleware将所有的redux状态拉到本地存储中,rehydrateStore将所有的applicationState拉到本地存储中,如果存在的话,将其放入redux存储中
import {createStore, applyMiddleware} from 'redux'
import createSagaMiddleware from 'redux-saga';
import decoristReducers from '../reducers/decorist_reducer'
import sagas from '../sagas/sagas';
const sagaMiddleware = createSagaMiddleware();
/**
* Add all the state in local storage
* @param getState
* @returns {function(*): function(*=)}
*/
const localStorageMiddleware = ({getState}) => { // <--- FOCUS HERE
return (next) => (action) => {
const result = next(action);
localStorage.setItem('applicationState', JSON.stringify(
getState()
));
return result;
};
};
const reHydrateStore = () => { // <-- FOCUS HERE
if (localStorage.getItem('applicationState') !== null) {
return JSON.parse(localStorage.getItem('applicationState')) // re-hydrate the store
}
}
const store = createStore(
decoristReducers,
reHydrateStore(),// <-- FOCUS HERE
applyMiddleware(
sagaMiddleware,
localStorageMiddleware,// <-- FOCUS HERE
)
)
sagaMiddleware.run(sagas);
export default store;
推荐文章
- 很好的初学者教程socket.io?
- HtmlSpecialChars在JavaScript中等价于什么?
- React: 'Redirect'没有从' React -router-dom'中导出
- 如何在React中使用钩子强制组件重新渲染?
- 我如何使用Jest模拟JavaScript的“窗口”对象?
- 我如何等待一个承诺完成之前返回一个函数的变量?
- 在JavaScript中根据键值查找和删除数组中的对象
- 使嵌套JavaScript对象平放/不平放的最快方法
- 如何以及为什么'a'['toUpperCase']()在JavaScript工作?
- 有Grunt生成index.html不同的设置
- 文档之间的区别。addEventListener和window。addEventListener?
- 如何检查动态附加的事件监听器是否存在?
- 如何写setTimeout与参数Coffeescript
- 将JavaScript字符串中的多个空格替换为单个空格
- JavaScript: override alert()