reactjs - React Redux 刷新问题

Question

我正在使用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 并更新商店，但是仪表板链接到应用程序以供您使用数据操作的某些部分。当它链接时，我按预期获取 props 中的数据，但是一旦应用程序布局中刷新任何页面，我就会丢失由 maptoprops 发送的 props。

我尝试合并为一个主布局，但这似乎具有相同的效果。我还尝试在第一次接收数据时立即保存到状态，但刷新后似乎也会丢失，这让我认为它正在重置它。

摘要:- DashboardLayout(连接到 redux)- AppLayout(连接到 redux)，但是在页面刷新后，它会丢失 Applayout 的 props，并且所需的数据消失了。

Answer 1

了解 redux-persist

https://github.com/rt2zz/redux-persist

您可以使用安装它

npm i --save redux-persist

persistStore是允许你持久存储的函数。

import {persistStore} from 'redux-persist'

autoReHydra 是每当状态需要重新水化时执行的操作

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)

然后是你的 reducer

 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最基本的使用希望它有帮助。