标签: redux-persist

为什么使用redux-persist而不是手动将状态保存到localStorage?

另一种方式来问是,如果你真的只想与保存在localStorage的(补充水分)的数据开始您的应用程序和保存每Redux的状态变化到localStorage的(坚持)使用终极版-坚持用你自己喜欢的解决方案更好丹阿布拉莫夫在这里解释一下

我明白了终极版 - 坚持自带了很多其他功能,而我自己开始使用它能够使用终极版 - 坚持 - 交叉表(要能应对不同的选项卡上运行的应用程序之间的变化),但我不知道是否是过度使用它以用于最基本的场景.特别是因为它更难理解,有时会做有趣的事情,比如随机调用persist/REHYDRATE.

我错过了这里明显的一切吗?谢谢

reactjs redux react-redux redux-persist

5
推荐指数
1
解决办法
5526
查看次数

即使保存的数据不变,IndexedDB的大小仍在增长

我在Web应用程序中使用Redux PersistLocalForage。我有一系列在登录时触发的操作,这些操作会更新有关用户的一些数据。触发所有操作并将数据以JSON格式保存在indexedDB上后,IndexedDB的大小为〜1.4Mb。

初始存储

但是,如果我刷新页面从而再次触发操作,或者注销并重新登录,即使IndexedDB内的值发生变化(我已经使用JSON diff工具进行了两次检查),存储的大小就会不断增加。最终,Chrome会在增长几MB后清除掉其中的一部分,但不会恢复到最初的正确大小。

大存储空间

IndexedDB JSON完全相同,没有任何区别,但是大小存在巨大差异。有谁知道为什么会这样,我该如何预防呢?我还想知道Chrome何时/多久清除一次使我的IndexedDB混乱的数据,但是我却找不到任何参考。

非常感谢

google-chrome indexeddb localforage redux redux-persist

5
推荐指数
1
解决办法
370
查看次数

redux-persist-如何将嵌套状态列入黑名单/白名单

所以我有一个凭证对象,其中包含密码和用户名

payload: Object
  credentials: Object
    password: ""
    username: ""
Run Code Online (Sandbox Code Playgroud)

我想在减速器配置中将密码列入黑名单,例如

const authPersistConfig = {
    key: 'AuthReducer',
    storage: storage,
    blacklist: ['credentials.password']
};
Run Code Online (Sandbox Code Playgroud)

如果使用此代码,则两个凭据状态最终都会被列入黑名单。我要保留用户名而不是密码。

可能redux-persist仅保留顶级状态,或者可能是语法错误,或者完全是其他原因-有什么想法吗?

非常感谢

state nested blacklist redux-persist

5
推荐指数
1
解决办法
2259
查看次数

将redux与redux-persist与服务器端渲染一起使用

我正在尝试在SSR应用程序中使用redux-persist 5.10.0实现redux 4.0.0,并且遇到一个问题,在该问题中,createStore()如果应用程序崩溃,我将无法正确提供预加载状态。

发生的情况是应用程序从服务器加载了初始状态,但是当应用程序尝试createStore()在客户端上预加载状态时,应用程序刷新并崩溃。我以为是因为我的preloadedState格式不正确?

但是我不确定,因为在控制台,UI,nada中没有收到任何错误消息。

这是一些相关的代码:

商店/index.js

export default function configureStore(preloadedState = {}) {
    // This will store our enhancers for the store
    const enhancers = [];

    // Add thunk middleware
    const middleware = [thunk];

    // Apply middlware and enhancers
    const composedEnhancers = compose(
        applyMiddleware(...middleware),
        ...enhancers
    );

    // Set up persisted and combined reducers
    const persistedReducer = persistReducer(persistConfig, rootReducer);

    // Create the store with the persisted reducers and middleware/enhancers
    const store = createStore(persistedReducer, preloadedState, composedEnhancers);

    const …
Run Code Online (Sandbox Code Playgroud)

javascript reactjs redux server-side-rendering redux-persist

5
推荐指数
2
解决办法
819
查看次数

redux-persist 黑名单被忽略

我已经浏览了我能找到的内容,但据我所知,我做的事情是正确的。

我的 configStore.js 看起来像这样:

import diaryReducer from '../reducers/diaryReducer';
[..]
const diaryPersistConfig = {
    key: 'diary',
    storage: storage,
    keyPrefix: '',
    blacklist: ['loading', 'uploadModalVisible', 'monthModalVisible', 'editModalVisible', 'entryUploading', 'deleteEntryDisabled']
};
[..]
const persistedReducer = persistReducer(persistConfig, combineReducers({
    auth: persistReducer(authPersistConfig, authReducer),
    diary: persistReducer(diaryPersistConfig, diaryReducer)
}));
Run Code Online (Sandbox Code Playgroud)

我的 diaryreducer.js 看起来像这样:

const diaryDefaultState = {
    loading: false,
    uploadModalVisible: false,
    monthModalVisible: false,
    editModalVisible: false,
    entryUploading: false,
    deleteEntryDisabled: false,
    entries: []
};

export default (state = diaryDefaultState, action) => {

switch (action.type) {

    case 'ENTRIES_LOADING':
        return {
            ...state,
            loading: true …
Run Code Online (Sandbox Code Playgroud)

react-native redux-persist

5
推荐指数
1
解决办法
1922
查看次数

Redux Sagas 未使用 redux persist 和connected-react-router 输入

我有一个 React Web 应用程序,它使用 redux、connected-react-router、redux saga 和 redux persist 以及带有 React-hot-loader 和 webpack 的 HMR。对大多数软件包进行重大更新后,我注意到传奇故事没有输入/执行。

相关包的当前版本为: "react": "^16.7.0", "react-redux": "^6.0.0", "redux": "^4.0.1", "redux-persist": “5.6.12”,“redux-saga”:“^1.0.1”,“react-hot-loader”:“^4.6.5”,“connected-react-router”:“^6.2.2”,“ webpack": "^4.29.3"。

我已尝试将 HMR 实现从 v4 恢复到较低版本,但我相信这是有效的。我还认为这可能是连接反应路由器实现,但我现在对此也很有信心(但我将展示两者以供参考)。我猜这是我的 redux 存储配置的问题,但我想如果我知道我就不会寻求帮助。

index.js 文件(应用程序入口点)

import React from 'react';
import ReactDOM from 'react-dom';
import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import App from './components/App';
import store, { persistor } from './store/config';

const render = (Component) => {
  ReactDOM.render(
    <Provider store={store}>
      <PersistGate persistor={persistor}>
        <Component />
      </PersistGate> …
Run Code Online (Sandbox Code Playgroud)

reactjs redux redux-saga redux-persist connected-react-router

5
推荐指数
1
解决办法
1369
查看次数

除了我不想在 redux-persist 中清除的内容之外,如何清除所有内容?

我正在寻找如何使用 redux-persist 部分清除。我不知道它是否有相关的方法。这是我的代码,我知道这种方式将删除所有状态。如果您对此有任何想法,请回复,我将不胜感激。谢谢 :)


const configure = () => {
    const devTools = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__();
    let store = createStoreWithFirebase(reducer, devTools, applyMiddleware(ReduxThunk));
    let persistor = persistStore(store);

    persistor.purge();
    return {store, persistor};
}
Run Code Online (Sandbox Code Playgroud)

reactjs react-native react-redux redux-persist

5
推荐指数
1
解决办法
4608
查看次数

Jest Redux Persist:TypeError:无法在 writeStagedState 读取未定义的属性“catch”

我正在尝试使用 Jest 和 Typescript 测试我的 LoginScreen。我使用 redux 和 redux-persist 进行存储,并将存储设置为使用 AsyncStorage 作为配置的一部分。我怀疑 redux-persist 试图在它使用的内置超时功能用完并尝试将存储设置为默认存储后重新水合?我收到以下错误:

console.error
redux-persist: rehydrate for "root" called after timeout. undefined
undefined
at _rehydrate (node_modules/redux-persist/lib/persistReducer.js:70:71)
at node_modules/redux-persist/lib/persistReducer.js:102:11
at tryCallOne (node_modules/promise/setimmediate/core.js:37:12)
at Immediate._onImmediate (node_modules/promise/setimmediate/core.js:123:15)
Run Code Online (Sandbox Code Playgroud)

目前我的测试是这样的:

describe('Testing LoginScreen', () => {
  it('should render correctly', async () => {
    const { toJSON } = render(<MockedNavigator component={LoginScreen} />);
    await act(async () => await flushMicrotasksQueue());
    expect(toJSON()).toMatchSnapshot();
  });
});
Run Code Online (Sandbox Code Playgroud)

我的 MockNavigator 看起来像这样:

type MockedNavigatorProps = {
  component: React.ComponentType<any>;
  params?: {};
};

const Stack = …
Run Code Online (Sandbox Code Playgroud)

jestjs react-native redux-persist react-native-testing-library

5
推荐指数
1
解决办法
906
查看次数

4
推荐指数
1
解决办法
2925
查看次数

Expo React Native App + Redux-Persist:AsyncStorage 问题

我刚刚启动了一个新的托管Expo React Native 项目(Expo SDK 35、 React Native 0.5.9redux-persist@6.0.0,但即使是带有 redux/redux-persist 的新 expo 项目当前也会抛出以下错误。


使用AsyncStorage来自react-native,

我们得到错误:

redux-persist:需要 config.storage。尝试使用提供的存储引擎之一import storage from 'redux-persist/lib/storage'


使用AsyncStorage来自@react-native-community/async-storage,

我们得到错误:

[@RNC/AsyncStorage]:NativeModule:AsyncStorage 为空。


使用storage来自redux-persist/lib/storage,

我们得到错误:

console.error:“redux-persist 无法创建同步存储。回退到 noop 存储。”


问:如何解决这个问题而不弹出?谢谢!


redux-persist代码

注意:之前的尝试已被注释掉:

// Chose 1 of the 3 storages
// import { AsyncStorage } from "react-native";
// import AsyncStorage from '@react-native-community/async-storage';
import storage from 'redux-persist/lib/storage'

import { createMigrate, …
Run Code Online (Sandbox Code Playgroud)

reactjs react-native asyncstorage expo redux-persist

4
推荐指数
2
解决办法
6674
查看次数