标签: redux-persist

我正在学习 redux 并想知道如何在本地保存状态，以便在对状态进行一些更改后刷新时保持状态。我开始了解 redux-persist 并看到了描述如何使用它的 github 文档，但对我来说不是很清楚。

这是我的应用程序的 index.js 代码 -

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store={createStoreWithMiddleware(reducers)}>
    <App />
  </Provider>
  , document.querySelector('#container'));

我怎样才能实现它？

起初，我的RN 应用程序仅使用AsyncStorage来存储我的用户身份验证参数。

最近，我决定将redux集成到这个应用程序中，这样我就可以拥有全局存储、健壮的代码结构和干净的单元测试。

所以我确实实现了Redux和Redux-thunk。它工作得很好，但我注意到了一些让我感兴趣的事情。当我刷新我的应用程序时，我注意到我的 redux state没有持久化。

我丢失了我的身份验证凭据。在生产中，这可能意味着我的用户每次关闭我的应用程序时都必须登录。

所以我不得不redux-persist使用AsyncStorage来实现。

我的问题是：根据定义，当 AsyncStorage 已经存在时，为什么我需要在我的 react-native 应用程序中实现 redux-persist，

一个简单的、未加密的、异步的、持久的、键值存储系统，对应用程序是全局的。

?

谢谢你的解释

为了在页面刷新时保持状态，我正在尝试集成redux-persist. 但是，它不起作用。页面刷新会清除状态。以下是_persistobject int the state 的样子：

_persist: {
   version: -1,
   rehydrated: true
}

这是configureStore.js：

import { createStore, applyMiddleware, compose } from "redux";
import logger from "redux-logger";
import thunk from "redux-thunk";
import rootReducer from "./_reducers/rootReducer";
import storage from "redux-persist/lib/storage";
import { persistStore, persistReducer } from "redux-persist";
const persistConfig = {
    key: "root",
    storage,
    whitelist: []
};
const persistedReducer = persistReducer(persistConfig, rootReducer);
const middlewares = [thunk];
// if (__DEV__) react native check dev
middlewares.push(logger);

const store = createStore( …

我需要获取 Redux 存储数据，但并不总是获取每个组件实例化的不同数据。如何在条件语句中使用 useSelector？

组件应该只在渲染某些子组件时才从 store 获取数据，并且每次都根据子组件的不同而获得不同的数据。

似乎可以AsyncStorage从Android（本机）访问；但我仍在努力使这项工作。

在我的React Native应用程序中，我有类似以下内容：

商店

const config = {
  ...
}

export const reducers = {
  ...
  user: user
}


let rootReducer = combineReducers(reducers)
let reducer = persistReducer(config, rootReducer)

用户减速器

export class Actions {
    ...
}

const initialState = {
      first_name: : null,
      last_name: : null,
      email: null,
      addresses: [
          { ... }
      ]
    }
  }
}

export const reducer = (state = initialState, action) => {
  switch (action.type) {
    ...
  }
}

从商店获取用户

const user = store.getState().user
console.log(user.first_name) …

自从我的控制台中的某个时间以来，我一直收到以下错误，我不知道它的意思以及它为什么产生。请对此事发表一些看法。

它说：

persistReducer.js:50 Uncaught TypeError: action.rehydrate is not a function
at _rehydrate (persistReducer.js:50)
at persistReducer.js:54

package.json上的redux-persist版本：“ ^ 5.6.11”锁定版本：“ 5.9.1”

商店配置代码：

import thunk from 'redux-thunk';
import { persistStore } from 'redux-persist';
import { History, createBrowserHistory } from 'history';
import { createUserManager, loadUser } from "redux-oidc";
import { routerReducer, routerMiddleware } from 'react-router-redux';
import { createStore, applyMiddleware, compose, combineReducers, GenericStoreEnhancer, Store, StoreEnhancerStoreCreator, ReducersMapObject } from 'redux';

import * as StoreModule from './reducers';
import { ApplicationState, reducers } from './reducers';

import userManager from …

我得到的更具体的错误是：警告：道具类型失败：道具store在中标记为必需Provider，但其值为undefined。

store.js

const initialState = {};

const storage = createSensitiveStorage({
  keychainService: "myKeychain",
  sharedPreferencesName: "mySharedPrefs"
});

const config = {
  key: "root",
  storage,
};

const middleware = [thunk];

const reducer = persistCombineReducers(config, rootReducer);

export default () => {
  let store = createStore(
    reducer,
    initialState,
    compose(applyMiddleware(...middleware))
  );
  let persistor = persistStore(store);

  return { store, persistor }
}

用于减速器的index.js：

export default combineReducers({
    profile: profileReducer,
    auth: authReducer,
    photoSlider,
    trip: tripReducer,
    moment: momentReducer
})

App.js：

import {store, persistor} from …

我正在使用 Redux 和 Redux-Persist 在应用程序关闭时保留一些用户的数据。

您可以在 PersistGate 中设置一个名为加载的选项，您可以在其中指定一个加载屏幕，该屏幕将在 Redux-Persist 收集持久数据时显示。

问题是这个屏幕出现和消失的速度太快了，我想看几秒钟。

有没有什么形式可以延迟加载画面的过渡？ 这是我的代码，应用程序的入口点：

class App extends Component {    

  render() {
    return (
      <Provider store={store}>
        <PersistGate loading={ <SplashScreen />} persistor={persistor}>
          <Routes />
        </PersistGate>
      </Provider>
    );
  }
}

我正在使用 Next.js 和 redux 构建一个电子商务应用程序。我注意到，当我将 redux-persist 添加到应用程序时，所有元标记都停止工作。我在下面添加了我的代码片段

import { combineReducers } from 'redux'
import { configureStore } from '@reduxjs/toolkit'
import shopReducer from './reducers/shop/shopSlice'
import storage from 'redux-persist/lib/storage'
import { persistStore,persistReducer, FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER } from 'redux-persist'

const initState = {}

const persistConfig = {
   key: 'root',
   version: 1,
   storage,
   whitelist: ['shop'],
}

const rootReducer = combineReducers({
   shop: shopReducer,
})

const persistedReducer = persistReducer(persistConfig, rootReducer)

const reduxStore = () => {
   const store = configureStore ({
       initState,
       reducer: …

这是我第一次使用Redux和Redux Persist。当我尝试运行我的应用程序时出现此错误（在index.js第20行中）：

TypeError：未定义不是对象（正在评估“ store.getState”）

index.js：

import React from 'react';
import { AppRegistry } from 'react-native';
import App from './App';
import { name as appName } from './app.json';
import { Provider } from 'react-redux';
import {persistor, store}from './store/configureStore';
import { PersistGate } from 'redux-persist/integration/react';

const RNRedux = () => (
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App/>
        </PersistGate>
    </Provider>
)

AppRegistry.registerComponent(appName, () => RNRedux);

App.js：

import {createStackNavigator, createAppContainer} from 'react-navigation';
import Register from './components/Register';
import Home from './components/Home';
import Login from './components/Login'; …