React Redux Refresh问题

时间:2016-10-12 19:25:23

标签: reactjs redux react-redux

我正在使用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的道具并且所需的数据消失了。

4 个答案:

答案 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)

如前面的答案所述,将状态存储在本地存储中是一种可能的解决方案,但其他一些可能的解决方案是

  1. 确保您的链接使用推送API,即<Link to={"route"}/>(react-router)这将确保在路由更改之间不删除商店

  2. 在您创建商店时设置初始状态

  3. const rootReducer = combineReducers({
      todos: todos,
      visibilityFilter: visibilityFilter
    });
    
    const initialState = { 
      todos: [{id:123, text:'hello', completed: false}] 
    };
    
    const store = createStore(
      rootReducer, 
      initialState
    );

    这将在初始化时为您的reduce商店加水

    1. 您可以使用其他一些libs / frameworks / boilerplates来实现服务器呈现,将HTML呈现给初始呈现的页面,然后在DOM加载后加载React这些图书馆是
    2. Next.js,Electroide,反应-终极版的通用-热示例

      沿着这条路走下去会增加你的应用程序的复杂性,所以你应该在开始这条路线之前权衡利弊

答案 3 :(得分:0)

我有这个问题,所以正如有人在这里提到的,我使用了localStorage。

在我的减速机中,我确实喜欢这样:

&#13;
&#13;
~
&#13;
&#13;
&#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可确保我们在页面重新加载时保持正确的值。

希望它对某人有帮助。