标签: redux-persist

我正在尝试在React Native应用程序中设置redux-persist。

但是我遇到了这个错误：

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

我尝试将“ src / redux / index.js”中的存储从存储更改为AsyncStorage，但仍然遇到相同的错误：

import AsyncStorage from '@react-native-community/async-storage';

const config = {
  key: "root",
  storage: AsyncStorage // Attempted to fix it (but failed)
  // storage // old code
};

这是其他代码：

在App.js中：

import React, { Component } from "react";
import { Provider } from "react-redux";
import { persistStore } from "redux-persist";
import { PersistGate } from "redux-persist/es/integration/react";
import store from "@store/configureStore";
import Router from "./src/Router";

export default class ReduxWrapper extends Component {
  render() …

我有以下代码:

const App = () => {
    return (
        <Provider store={store}>
            <PersistGate persistor={persistor} loading={<Text>Loading!</Text>}>
                <ConnectedRootComponent />
            </PersistGate>
        </Provider>
    );
};

export default App;

它使用redux-persist来补充状态,在此之前,它将显示加载属性中的内容.我有一个Jest测试(只是默认的一个带有反应原生的开箱即用):

it('renders without crashing', () => {
  const rendered = renderer.create(<App />).toJSON();
  console.log("Rendering: " + JSON.stringify(rendered));
  expect(rendered).toBeTruthy();
});

但是虽然测试通过,但我发现仍然发生的动作,persist/PERSIST以及persist/REHYDRATE测试中打印到控制台的值(渲染输出)是:

{
    "type": "Text",
    "props": {
        "accessible": true,
        "allowFontScaling": true,
        "ellipsizeMode": "tail"
    },
    "children": ["Loading!"]
}

我想要做的是等到redux-persist完成水合,然后检查渲染值.我怎样才能做到这一点？

我们正在构建一个React Native应用程序,它使用redux-persist来存储应用程序状态,包括导航状态.我想这个应用程序在导航方面表现得像本机应用程序:

当原生Android应用程序进入后台时,最终会被操作系统停止,然后移动到前台,它将在用户之前停止的活动中恢复.如果同一个应用程序被用户杀死(或崩溃),它将在主Activity上打开.

对于RN应用程序,这意味着redux-persist应该持久化并恢复应用程序的componentWillMount中的导航状态,但前提是应用程序未被用户杀死.

以下代码有效:

componentWillMount() {
  if (global.isRelaunch) {
    // purge redux-persist navigation state
  }
  global.isRelaunch = true;
...

但它看起来很乱,我也不明白为什么全球范围仍然存在.

检测RN应用程序是否从后台重新打开的正确方法是什么？(理想情况下支持iOS)

我在 React Native 应用程序中使用@redux/toolkitwith 。redux-persistTypeScript

商店.ts

    import { configureStore } from '@reduxjs/toolkit';
    import { combineReducers } from 'redux';
    import { persistReducer, persistStore } from 'redux-persist';
    import thunk from 'redux-thunk';
    import AsyncStorage from '@react-native-async-storage/async-storage';
    import calenderReducer from './reducer/calender';

    const reducers = combineReducers({
    graph: calenderReducer,
    });

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

    const persistedReducer = persistReducer(persistConfig, reducers);

    export const store = configureStore({
    reducer: persistedReducer,
    devTools: process.env.NODE_ENV !== 'production',
    middleware: [thunk],
    });

    // Infer the `RootState` …

我正在尝试将redux-persist与wix react-native-navigation集成.但是,我无法找到任何说明集成两个库所需的样板代码的示例或文档.

我想知道是否有人想分享他们的解决方案,如果他们已经解决了这个问题？

我已经使用传统的 react-redux 设置配置了 redux-persist，如下所示：

onst persistConfig = {
  key: 'root',
  storage,
  whitelist: ['todos'],
};

const persistedReducer = persistReducer(persistConfig, reducer);

const store = createStore(
  persistedReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

const persistor = persistStore(store);

// wrapper
const StateProvider = ({ children }) => {
  return (
    <Provider store={store}>
      <PersistGate loading={<div>Loading...</div>} persistor={persistor}>
        {children}
      </PersistGate>
    </Provider>
  );
};

但是，如何使用 redux-toolkit 对其进行配置？到目前为止，我已经尝试过这个：

const persistedReducer = persistReducer(persistConfig, todoreducer);
const store = configureStore({
  reducer: {
    todos: persistedReducer,
  },
});

const persistor = persistStore(store);

// wrapper
const StateProvider …

我有一个无服务器 Next.js 应用程序，其中有一些组件依赖于从 redux 存储传递下来的数据。目前，我的方法需要 redux-persist 在用户导航时保存存储，否则如果存储中的数据不存在，上述组件将崩溃。我遇到的问题是，包裹整个应用程序的 redux-persist 的 PersistGate 阻止了对站点的外部请求访问每个页面内的动态元标记。像 metatags.io 这样的工具只能看到来自 persistgate 的加载组件。

如果我删除门，那么标头标签将呈现良好，但 redux 状态不再持久，如果用户刷新某些页面上的页面，则会导致问题。

我已经尝试了此 github 问题中讨论的一些方法，但有条件地包装 persistgate 仍然会导致问题，并且“next/head”组件在实际主体而不是头部内呈现。

我对 Next.js 还很陌生，它提供的 SEO 改进是我选择它而不是普通 React 的原因。我愿意接受一些不涉及 redux-persist 以及可能使用本地存储的模式建议。

这是 _app.js 目前的布局：

import App from 'next/app';
// Redux:
import { useStore } from 'redux/store';
import { Provider } from 'react-redux';
import { persistStore } from 'redux-persist';
import { PersistGate } from 'redux-persist/integration/react';
import LoadingView from 'components/base/LoadingView';
import Layout from 'components/base/Layout';
// i18n wrapper:
import { appWithTranslation …

需要关于使用 redux 的大型 React Native 移动应用程序使用哪个库的建议？redux-offline或react-native-offline？

我需要定期检查连接状态，根据连接状态呈现视图，在离线时将操作添加到队列中并在在线时运行它们，如果存在一些矛盾则取消操作，并离线保存/重新水化数据。

在使用 LocalStorage 之前，我想通过单击横幅按钮来获得用户的同意。LocalStorage 通过redux-persist. 我正在使用redux和redux-persist如下：

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persitor} >
      <MyAppRouter />
    </PersistGate>
  </Provider>,
  document.getElementById("root")
)

并store与persistor来自来了

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

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

const persistedReducer = persistReducer(persistConfig, rootReducer)

const store = createStore(persistedReducer)
const persistor = persistStore(store as any)
// `as any` is necessary …

我是本机反应的新手。我想构建一个离线 React Native 应用程序来存储用户数据（基本用户详细信息、用户个人文档、图像等）。我已经浏览了一些关于 react-native-sqlite-storage 的文档，我想整合它。但不确定，

1. 如果用户删除应用程序数据时我可以恢复所有用户数据
2. 使用 react-native-sqlite-storage 比 redux-persist 进行离线应用开发有什么优势？