我正在使用react-native-navigation和redux进行状态管理。我将每个Component注册为WrappedComponent,将其连接到redux存储。这非常有效,并且与来自官方react-native-navigation文档:The Last Pickle regarding Time Series
的atoami示例代码非常相似。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))
);
但是,我找不到一种方法来为那些被包装的组件设置持久化。我不想在WrappedComponent
函数中执行此操作,因为它随后将为每个单独的组件调用。我也找不到关于此的清晰文档。
我想我也可以使用AsyncStorage,但希望与Redux-persist一起使用。有人知道该怎么做吗?
答案 0 :(得分:2)
这是我处理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));
...
}
答案 1 :(得分:0)
import {persistStore} from 'redux-persist';
Navigation.events().registerAppLaunchedListener(() => {
persistStore(store,null,()=>{
setRoot();
});
});
您可以像这样添加Redux-persist和react-native-navigation。