标签: redux-persist

我正在使用react,redux和实现登录表单redux-persist。后端团队已准备好登录 API。该表单有一个“记住我”复选框，我想从登录响应中保留 JWT 身份验证令牌。

我认为实现“记住我”的正确方法是：

• 如果未选中“记住我”，则应将令牌持久化到 sessionStorage. 这样当浏览器关闭时，用户应该再次登录，但不需要在切换选项卡或刷新当前页面时登录。
• 如果选中，则应将令牌持久化到localStorage. 即使浏览器关闭，用户仍处于登录状态。

现在我从我们的后端角度知道只有令牌过期时间。

我的第一个问题是我的客户端视图和方法是否正确。

如果是，我如何根据登录“记住我”复选框更新我的持久配置？

我的电流store.js是这样的：

import { createStore } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage'; 
import rootReducer from './reducers';

const persistConfig = {
  key: 'root',
  storage,
  whitelist: ['auth'],
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

const store = createStore(persistedReducer);

const persistor = persistStore(store);

export {
  store, persistor
};

它在这里使用：

import React from 'react';
import …

我正在尝试在我的 React Native 应用程序上实现 Redux-persist。完全按照设置文档，我从这个更改了我的 store.js：

import { applyMiddleware, createStore } from 'redux';
import * as thunkMiddleware from 'redux-thunk';

import reducers from '../reducers';

let middlewares = [thunkMiddleware.default];
const store = createStore(reducers, applyMiddleware(...middlewares));

export default store;

对此：

import { applyMiddleware, createStore } from 'redux';
import * as thunkMiddleware from 'redux-thunk';
import { persistStore, persistReducer } from 'redux-persist';
import AsyncStorage from '@react-native-community/async-storage';

import reducers from '../reducers';

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
};
const persistedReducer = persistReducer(persistConfig, reducers); …

问题：我们如何记录消息并将其保存在生产 React Native Expo 应用程序的设备上？

要求

• 将日志文件存储在移动设备上
• （理想情况下）日志轮换、压缩和/或修剪
• 日志文件可以按需发送到远程服务器（即用户单击按钮）

不适合的候选人

• Expo 支持Sentry，但它用于崩溃报告。
• Expo 支持Amplitude和Segment，但它们更多用于分析。

Sentry、Amplitude 和 Segment 不适合，因为我们更多的是寻找一种按需记录日志并将日志转储到远程服务器的实现。我们也可以创建自己的 Node.js 服务器来接受传入的日志转储，因此不需要托管服务。

我们的应用程序当前使用redux-persist，想知道是否有一个解决方案（包括第 3 方库）用于登录到与 React Native Expo 应用程序兼容的持久 redux 存储？

我正在关注反应导航文档，react-navigation-redux-helpers 的文档，但总是向我抛出这个错误。此外，如果我删除了persistGate，错误会得到修复，但我需要保留一些数据，所以这不应该是一个选项

这是我的 store.js

import { createStore, applyMiddleware } from 'redux';
import { persistStore, persistReducer } from 'redux-persist';
import { AsyncStorage } from 'react-native';
import { createReactNavigationReduxMiddleware } from 'react-navigation-redux-helpers';

import Reducer from './reducers/index';

const persistConfig = {
    key: 'root',
    storage: AsyncStorage,
    blackList: [],
};

const AppReducer = persistReducer(persistConfig, Reducer);

const middleware = createReactNavigationReduxMiddleware(
    (state) => state.navigation,
);

export const store = createStore(AppReducer, applyMiddleware(middleware));
export const persistor = persistStore(store);

这是我的 app-with-state.js

import AppNavigator from './AppNavigator';

const AppNavigatorWithState = createReduxContainer(AppNavigator);

class …

我想将用户相关的属性存储在 sessionStorage 中，并将其他属性存储在 localStorage 中。我能够使用以下配置的 persist 将所有属性存储在 localStorage 中

import reducers from './reducer';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const persistConfig = {
key: 'root',
storage: storage,
stateReconciler: autoMergeLevel2 // see "Merge Process" section for details.
};

const pReducer = persistReducer(persistConfig, reducers);

有人可以告诉我如何在 persist 中配置 sessionStorage 和 localStorage 吗？

我想将我的一些减速器列入黑名单，因为我的状态树越来越大，我收到了这个错误：

无法将调试会话写入 localStorage: DOMException: Failed to execute 'setItem' on 'Storage': 设置 'redux-persist' 的值超出配额。(...)"

我找到的解决方案是将一些不需要持久化的减速器列入黑名单。所以我在我的App.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { persistStore } from 'redux-persist'
import { Initializer } from './components';
import store from './store';

class App extends Component {
  constructor() {
    super()
    this.state = { rehydrated: false }
  }

  componentWillMount(){
    persistStore(store, { blacklist: ['project', 'comment', 'project', 'jobOrder']}, () => { …

嗨，在我们的应用程序中，我们有一个减速器模式：

{
   data: //here we have our actual data
   fetching: // is it still fetching 
   intact: // has it been 'touched'
   error: //errors if need be
}

此外，由于业务需求，我需要坚持一个 ReduxForm，它是它自己的蠕虫罐......

form: {
    Foobar: {
      values: {

      },
      initial: {

      },
      syncErrors: {

      },
      registeredFields: {

      }
    }
  }
}

正如您可能已经发现的那样，保留数据以外的任何内容都是没有意义的，但是 Redux-Persist 保留了整个 reducer。关于过滤和转换的例子有点……我觉得乏味，我一直在努力实现。寻找一个例子

我在我的 React 应用程序中使用 redux-persist 。注销时，我想完全重置 redux 状态并删除所有本地存储数据。

这是我的注销操作，其中我从后端删除刷新令牌，然后在调度 RESET 之前对 redux 存储持久器调用 purge。

export const logout = () => (dispatch) => {
    if (localStorage.refreshToken) {
        axios.post(`${API_URL}/logout`, {token: localStorage.refreshToken}).then( async () => {
            // rest redux-persist
            await persistor.purge();
            dispatch({ type: RESET });
        });
    }
}

在我的根减速器中，我按照此处的答案来处理此重置操作：

const appReducer = combineReducers({
    /* app level reducers...*/
});

const rootReducer =  (state, action) => {
    console.log("Reducing action: ", action);
    if (action.type === RESET) {
        // reset state
        state = undefined;
        // reset …

我正在尝试将 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 添加到 redux 工具包，但由于某种原因，我Exported variable 'store' has or is using name '$CombinedState' from external module ".../node_modules/redux/index" but cannot be named.在 vscode 上收到错误。

这是我的商店配置文件，添加了持久配置，如果我删除它，工作正常。

import { configureStore } from "@reduxjs/toolkit";
import { persistReducer } from "redux-persist";
import storage from "redux-persist/lib/storage";
import { createEpicMiddleware } from "redux-observable";
import rootEpic from "onsite/redux/rootEpic";
import rootReducer from "onsite/redux/rootReducer";

const epicMiddleware = createEpicMiddleware();

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

const persistedReducer = persistReducer(persistConfig, rootReducer);

// Line that shows error …