我正在使用react-redux,我遇到了一个问题,当页面刷新时我会丢失我的redux状态。
在我进一步研究之前,这就是我可能搞砸的情景。
问题一:我可以连接到多个布局吗?
我有一个仪表板和一个应用程序"布局。两者都有不同的布局。我以同样的方式连接两者:
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreators';
function mapStateToProps(state) {
return {
profile: state.profile,
child: state.child,
}
}
function mapDispachToProps(dispatch) {
return bindActionCreators(actionCreators, dispatch);
}
const LayoutApp = connect(mapStateToProps, mapDispachToProps) (DashboardLayout);
export default LayoutApp;
仪表板连接得很好。当我需要并更新商店时,我能够点击Reducer,但是仪表板链接到应用程序,以便您进行数据操作的某些部分。当它链接时,我按照预期获得道具中的数据,但是一旦任何页面在应用程序布局中刷新,我就会松开由maptoprops发送的道具。
我试图合并为一个主布局,但似乎具有相同的效果。当我第一次接收数据时,我也试图立即保存到状态但是在刷新时似乎也丢失了,这让我觉得它正在重置它。
要点: - DashboardLayout(连接到redux) - AppLayout(连接到redux)但是在页面刷新之后它会丢弃到Applayout的道具并且所需的数据消失了。
答案 0 :(得分:1)
了解redux-persist
https://github.com/rt2zz/redux-persist
您可以使用
进行安装npm i --save redux-persist
persistStore是一个允许你持久存储的功能。
import {persistStore} from 'redux-persist'
和autoRehydrate是每当状态需要再水化时执行的操作
import {autoRehydrate} from 'redux-persist'
以下是可能有用的结构。
import {compose, applyMiddleware, createStore} from 'redux'
import {persistStore, autoRehydrate} from 'redux-persist'
// add `autoRehydrate` as an enhancer to your store (note: `autoRehydrate` is not a middleware)
const store = createStore(
reducer,
undefined,
compose(
applyMiddleware(...),
autoRehydrate()
)
)
// begin periodically persisting the store
persistStore(store)
然后为你的减速机
import {REHYDRATE} from 'redux-persist/constants'
//...
case REHYDRATE:
var incoming = action.payload.myReducer
if (incoming) return {...state, ...incoming, specialKey:
processSpecial(incoming.specialKey)}
return state
以下是可用于解决redux-persist
的方法 persistor.pause() - pauses redux persist
persistor.resume() - resumes redux persist
persistor.purge() - deletes all persisted data
persistor.rehydrate() - calls reducer to rehydrate store
存储redux持久化类型允许
// sessionStorage
import { persistStore } from 'redux-persist'
import { asyncSessionStorage } from 'redux-persist/storages'
persistStore(store, {storage: asyncSessionStorage})
// react-native
import {AsyncStorage} from 'react-native'
persistStore(store, {storage: AsyncStorage})
// web with recommended localForage
import localForage from 'localforage'
persistStore(store, {storage: localForage})
这是最基本的用途,redux-persist希望它有所帮助。
答案 1 :(得分:0)
您可以根据需要为同一商店属性连接任意数量的组件 - 这不是问题。请注意这里,connect正在侦听更改,因此当操作更改存储时,它将导致所有侦听更改的存储部件的组件重新呈现(或者至少进行计算然后比较shadowdom)。
存储仅在运行应用程序时存储 - 在页面关闭/ resfresh之后它被清除。
关于商店的持久性(例如本地存储)有很好的线索:Where to write to localStorage in a Redux app?
答案 2 :(得分:0)
如前面的答案所述,将状态存储在本地存储中是一种可能的解决方案,但其他一些可能的解决方案是
确保您的链接使用推送API,即<Link to={"route"}/>
(react-router)这将确保在路由更改之间不删除商店
在您创建商店时设置初始状态
const rootReducer = combineReducers({
todos: todos,
visibilityFilter: visibilityFilter
});
const initialState = {
todos: [{id:123, text:'hello', completed: false}]
};
const store = createStore(
rootReducer,
initialState
);
这将在初始化时为您的reduce商店加水
Next.js,Electroide,反应-终极版的通用-热示例
沿着这条路走下去会增加你的应用程序的复杂性,所以你应该在开始这条路线之前权衡利弊
答案 3 :(得分:0)
我有这个问题,所以正如有人在这里提到的,我使用了localStorage。
在我的减速机中,我确实喜欢这样:
~
&#13;
将const exampleKey = "_exampleKey"
const INITIAL_STATE = {
example: JSON.parse(localStorage.getItem(exampleKey))
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case 'SET_TRUE':
localStorage.setItem( exampleKey, JSON.stringify(true));
return { ...state, example: true };
case 'SET_FALSE':
localStorage.setItem( exampleKey, JSON.stringify(false));
return { ...state, example: false};
default:
return state
}
指向localStorage的项INITIAL_VALUES.example
可确保我们在页面重新加载时保持正确的值。
希望它对某人有帮助。