Wix React-Native-Navigation v2 和 redux-persist

Posted 2023-02-16

【中文标题】Wix React-Native-Navigation v2 和 redux-persist

【英文标题】：Wix React-Native-Navigation v2 and redux-persist

【发布时间】：2019-10-22 13:53:02

【问题描述】：

我正在使用 react-native-navigation 和 redux 进行状态管理。我将每个组件注册为 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(
  reducers,
  composeEnhancer(applyMiddleware(thunk))
);

但是，我找不到为那些包装的组件设置 redux 持久性的方法。我不想在WrappedComponent 函数中执行它，因为它会被每个单独的组件调用。我也找不到明确的文档。

我想我也可以使用 AsyncStorage，但更愿意将它与 Redux-persist 一起使用。有人知道怎么做吗？

【参考方案1】：

这就是我处理 redux、redux 持久化和 wix v2 react-native-navigation 的方式

在你的store.js

import createStore,applyMiddleware from "redux";
import rootReducer from './reducers/RootReducer';
import thunk from 'redux-thunk';
import persistStore, persistReducer from 'redux-persist';
import compact from "lodash";
import storage from 'redux-persist/lib/storage';


const persistConfig = 
    key: 'app',
    storage,
;
const persistedReducer = persistReducer(persistConfig, rootReducer);

const middleware =compact([
    thunk.withExtraArgument()
]);


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

然后在您的navigation.js 或您基本上注册屏幕的地方

import React from "react";
import Navigation from "react-native-navigation";
import Provider from 'react-redux';
import PersistGate from 'redux-persist/integration/react'
import store, persistor from "./config/store"; //Check this line

function WrappedComponent(Component) 
  return function inject(props) 
    const EnhancedComponent = () => (
     <Provider store=store>
         <PersistGate loading=null persistor=persistor>
             <Component ...props/>
         </PersistGate>
      </Provider>
    );
    return <EnhancedComponent />;
  ;


// Then your normal registration
export function registerScreens() 
  Navigation.registerComponent("Initializing", () =>
    WrappedComponent(InitializingScreen)
  );
  Navigation.registerComponent("SignIn", () => WrappedComponent(SignInScreen));
...

【讨论】：

感谢您的回答。澄清一下，PersistGate 只会延迟组件的渲染，直到状态被加载，对吧？但是它不会尝试为通过增强组件创建的每个组件获取持久状态？那么持久化状态只在加载应用时加载一次？

根据他们的文档，是的 PersistGate 延迟应用 UI 的呈现，直到检索到持久状态并将其保存到 redux。是的，它会在您初始化应用程序时加载一次。欲了解更多信息，请点击此处github.com/rt2zz/redux-persist/blob/master/docs/PersistGate.md

太好了，我刚刚有机会尝试一下，效果很好。谢谢。

【参考方案2】：

import persistStore from 'redux-persist';
Navigation.events().registerAppLaunchedListener(() => 
 persistStore(store,null,()=>
   setRoot();
);
);

你可以像这样用 react-native-navigation 添加 Redux-persist。