Wix React-Native-Navigation v2 и redux-persist - PullRequest
Новая
       44

Wix React-Native-Navigation v2 и redux-persist

6 голосов
/ 07 июня 2019

Я использую реагирующую нативную навигацию и избыточность для управления состоянием. Я регистрирую каждый Компонент как WrappedComponent, подключая его к хранилищу избыточности. Это работает очень хорошо и очень похоже на код примера 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))
);

Тем не менее, я не смог найти способ настроить сохранность приставки для этих упакованных компонентов. Я бы не хотел делать это в функции WrappedComponent, потому что тогда он вызывался бы для каждого отдельного компонента. Я также не мог найти четкую документацию по этому вопросу.

Полагаю, я мог бы также использовать AsyncStorage, но предпочел бы использовать его вместе с Redux-persist. Кто-нибудь знает, как это сделать?

Ответы [ 2 ]

2 голосов
/ 15 июня 2019

Это то, как я работаю с приставками, приставками сохраняются и wix v2 реагирует на нативную навигацию

В вашем 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));
...
}
0 голосов
/ 14 июня 2019 
import {persistStore} from 'redux-persist';
Navigation.events().registerAppLaunchedListener(() => {
 persistStore(store,null,()=>{
   setRoot();
});
});

вы можете добавить Redux-persist с помощью реакции-нативной навигации, подобной этой.

...