Stan routera nie jest utrwalany w natywnym sposobie reakcji z reduxem

Question

Mam następującą konfigurację redux w react-native przy użyciu react-native-router-flux i redux-persist. Chcę odzyskać ostatnią aktualną trasę podczas odświeżania, jednak stos tras jest nadpisywany przy ponownym ładowaniu.

To reducers/index.js plik

import { combineReducers, createStore, applyMiddleware, compose } from 'redux' 
import { persistStore, autoRehydrate } from 'redux-persist' 
import { AsyncStorage } from 'react-native' 
import logger from 'redux-logger' 

import { startServices } from '../services' 
import navigation from './navigation' 
import devices from './devices' 
import rooms from './rooms' 


import { ActionConst } from 'react-native-router-flux' 

function routes (state = {scene: {}}, action = {}) { 
    switch (action.type) { 
    // focus action is dispatched when a new screen comes into focus 
    case ActionConst.FOCUS: 
     return { 
     ...state, 
     scene: action.scene, 
     }; 

    // ...other actions 

    default: 
     return state; 
    } 
} 

export const reducers = combineReducers({ 
    routes, 
    navigation, 
    devices, 
    rooms 
}) 

const middleware = [logger()] 

const store = createStore(
    reducers, 
    compose(
    autoRehydrate(), 
    applyMiddleware(...middleware) 
) 
) 

persistStore(store, {storage: AsyncStorage}, function onStoreRehydrate() { 
    startServices() 
}) 

export { store, reducers } 

EDIT: To jest index.js z tym dostawcą i sceny:

import React, { Component } from 'react' 
import { store } from './reducers' 
import { Provider, connect } from 'react-redux' 
import { Router, Scene, Actions } from 'react-native-router-flux'; 

import Home from './containers/home' 
import Login from './containers/login' 
import Device from './containers/device' 


const scenes = Actions.create(
    <Scene key="root"> 
     <Scene key="home" component={Home} /> 
     <Scene key="login" component={Login} /> 
     <Scene key="device" component={Device} /> 
    </Scene> 
) 

const RouterWithRedux = connect()(Router) 

export default class EntryPoint extends Component { 
    render() { 
    return (
     <Provider store={store}> 
     <RouterWithRedux scenes={scenes} /> 
     </Provider> 
    ) 
    } 
} 

Answer 1

react-native-router-flux nie przywraca sceny samodzielnie, nawet jeśli jest używana z redukcją. Redux śledzi tylko stan, więc jeśli chcesz, aby twój stan nawigacji pozostał nadal, musisz uruchomić nawigację do poprzedniej sceny.

Zakładając, że masz redux pracujący z react-native-router-flux, wystarczy podłączyć początkowy komponent aplikacji do redux, aby uzyskać swój stan, a następnie zmienić scenę w celu dopasowania.

Tak więc w początkowej scenie składnika załadowany do aplikacji, zrobić coś takiego na koniec, aby uzyskać dostęp do sklepu Redux:

const mapStateToProps = (state) => { 
    const { nav } = state 

    return { 
    currentScene: nav.scene.name, 
    } 
} 

INITIAL_COMPONENT = connect(mapStateToProps)(INITIAL_COMPONENT) 

Następnie w jednej z metod cyklu życia danego składnika można było przekierować tak:

const { currentScene } = this.props 
const initialScene = "Login" 

if (currentScene !== initialScene) { 
    Actions[currentScene]() 
} 

można także przekazać w rekwizytów, które były wykorzystywane podczas nawigowania do ostatniej sceny lub ustawić domyślną scenę, aby przejść do jeśli sklep Redux nie posiada scenę, że to utrzymującej. Aplikacja, nad którą pracuję, teraz pięknie się utrzymuje.

Answer 2

Musisz utworzyć store takiego:

const store = createStore(
    reducers, 
    compose(
    applyMiddleware(...middleware), 
    autoRehydrate(), 
) 
); 

The autoRehydrate musi być częścią twojego compose. Sprawdź this compose example.

Answer 3

można spróbować to myślę co się stało jest na porządku createstore

const enhancers = compose(
    applyMiddleware(...middleware), 
    autoRehydrate(), 
); 

// Create the store with the (reducer, initialState, compose) 
const store = createStore(
    reducers, 
    {}, 
    enhancers 
); 

lub drugi roztwór należy to robić ręcznie z import {REHYDRATE} from 'redux-persist/constants' i nazwać go wewnątrz reduktora.