标签: redux-persist

使用redux-persist时出错.我找不到有关redux-persist v5的文档.我只是按照官方用法示例.但我对此感到困惑.在我使用redux-persist之前,我可以正确地从商店获取状态.但是我希望在本地保持登录状态.所以我尝试使用redux-persist.然后我遇到了一些问题.这是我的代码:

reducer.js

const initialState = {
  isLogin: false,
  uname: "",
}

const userReducer = (state = initialState, action) => {
  switch(action.type) {
    case 'DO_LOGIN':
      return Object.assign({}, state, {
        isLogin: true,
        uname: action.payload.username
      })
    default:
      return state
  }
}

const reducers = combineReducers({
  userInfo: userReducer
})

export default reducers

store.js

import thunk from 'redux-thunk'
import { createLogger } from 'redux-logger'
import { createStore, applyMiddleware, compose } from 'redux'
import { persistStore, persistCombineReducers } from 'redux-persist'
import storage from 'redux-persist/es/storage'
import …

我正在使用react-native-navigation和redux进行状态管理。我将每个Component注册为WrappedComponent，将其连接到redux存储。这很好用，并且与官方react-native-navigation文档中的atoami示例代码非常相似：https：//wix.github.io/react-native-navigation/#/docs/showcases

import { Provider } from "react-redux";
import store from "./config/store";
...
function WrappedComponent(Component) {
  return function inject(props) {
    const EnhancedComponent = () => (
      <Provider store={store}>
        <Component {...props} />
      </Provider>
    );

    return <EnhancedComponent />;
  };
}

export function registerScreens() {
  Navigation.registerComponent("Initializing", () =>
    WrappedComponent(InitializingScreen)
  );
  Navigation.registerComponent("SignIn", () => WrappedComponent(SignInScreen));
...
}

商店对象为：

import { createStore, compose, applyMiddleware } from "redux";
import thunk from "redux-thunk";

import reducers from "../reducers";

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

export default createStore( …

我正在尝试将 redux-persist 添加到我的 React 项目中（使用 typescript）。但我有一些麻烦。编译失败，出现以下错误：

Could not find a declaration file for module 'redux-persist/lib/storage'. '.../WebstormProjects/catalog/node_modules/redux-persist/lib/storage/index.js' implicitly has an 'any' type.
  Try `npm install @types/redux-persist` if it exists or add a new declaration (.d.ts) file containing `declare module 'redux-persist/lib/storage'

我安装了以下软件包：“@types/redux-persist”：“^4.3.1”和“redux-persist”：“^6.0.0”。

redux-persist/lib/storage 的内容：

declare module "redux-persist/es/storage" {
  import { WebStorage } from "redux-persist/es/types";

  const localStorage: WebStorage;
  export default localStorage;
}

declare module "redux-persist/lib/storage" {
  export * from "redux-persist/es/storage";
  export { default } from "redux-persist/es/storage";
}

怎么做才能解决这个问题？

什么时候应该坚持，什么时候应该补充水分？命名约定非常令人困惑，因为作者几乎没有提及它们在redux-persist上下文中的含义。

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

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

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

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

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

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

非常感谢

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

payload: Object
  credentials: Object
    password: ""
    username: ""

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

const authPersistConfig = {
    key: 'AuthReducer',
    storage: storage,
    blacklist: ['credentials.password']
};

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

可能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 …

我有一个 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> …

当我将 Redux Toolkit Query 与 redux-persist 结合使用时会发生什么？

它会使用持久状态还是会重新获取状态？