ReduxのReact Navigation状態のないReux

Question

React NavigationのWebサイトでRedux Integration pageを見ましたが、なぜReduxストア内にナビゲーション状態を保存する必要があるのか​​理解できません。アプリケーションの状態をReduxで保存し、独自の状態を保つ？

router.getStateForAction()とrouter.getActionForPathAndParams()を統合するのは非常に複雑です。

• 我々は私たちが持っているすべての画面名にgetStateForAction()を使用するように私の心に質問がありますか？それぞれのための減速機を作成しますか？
• ルートナビゲータ内の他のナビゲータ内でネストされた画面に対しても同じ操作を行う必要がありますか？
• いつrouter.getActionForPathAndParams()を使用しますか？

おかげ

Answer 1

それは減速にナビゲーション状態を保存する必要はありません。あなたがそれを必要としない場合は、単に減速機とナビゲーションの状態でアプリの状態を保つだけです。次に、Reduxを次のように統合することができます。

// App.js 

import React from 'react'; 
import { Provider } from 'react-redux' 
import RootNavigator from './src/navigation/RootNavigation'; 
import configureStore from './src/stores/configureStore'; 

const store = configureStore(); 

export default class App extends React.Component { 
    render() { 
    return (
     <Provider store={store}> 
     <RootNavigator /> 
     </Provider> 
    ); 
    } 
} 

実際、Redux内でナビゲーション状態を統合するのはそれほど複雑ではありません。これを行うと、画面間をナビゲートするときにナビゲーション状態が自動的に更新されます。それは複雑なアプリでとても役立ちます。ですから、React NavigationとReduxを一緒に使う方法を説明しようと思います。将来的には役に立つかもしれません。

まず第一に、あなたはあなたのStackNavigator as usualを設定します（使用している場合）

// navigation/RootNavigator.js 

const HomeScreen =() => (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> 
    <Text>Home Screen</Text> 
    </View> 
); 

const RootNavigator = StackNavigator({ 
    Home: { 
    screen: HomeScreen, 
    }, 
}); 

export default RootNavigator; 

は、その後、あなたはreducersフォルダに移動し、navReducer.js

私達はちょうど RootNavigator.router.getStateForActionを使用

// reducers/navReducer.js 

import RootNavigator from '../navigation/RootNavigation'; 

const initialState = RootNavigator.router.getStateForAction(RootNavigator.router.getActionForPathAndParams('Home')); 

const navReducer = (state = initialState, action) => { 
    const nextState = RootNavigator.router.getStateForAction(action, state); 

    // Simply return the original `state` if `nextState` is null or undefined. 
    return nextState || state; 
}; 

を作成ナビゲーション状態を取得し、新しい減速機の初期状態として設定します。

そして、他の人と減速機を組み合わせた：

// reducers/index.js 

Import navReducer from ‘./navReducer’; 

const appReducer = combineReducers({ 
    nav: nav, 
    ... 
}); 

は、今、私たちは私たちのApp.jsを変更する必要があります。今のように見えます：

import React from 'react'; 
import { Provider, connect } from 'react-redux'; 
import { addNavigationHelpers } from 'react-navigation'; 
import RootNavigator from './src/navigation/RootNavigation'; 
import configureStore from './src/stores/configureStore'; 
const store = configureStore(); 

class AppComponent extends React.Component { 
    render() { 
    return (
     <RootNavigator navigation={addNavigationHelpers({ 
     dispatch: this.props.dispatch, 
     state: this.props.nav, 
     })} /> 
    ); 
    } 
} 

const mapStateToProps = (state) => ({ 
    nav: state.navReducer 
}); 

const AppContainer = connect(mapStateToProps)(AppComponent); 

export default() => { 
    return (
    <Provider store={store}> 
     <AppContainer /> 
    </Provider> 
) 
} 

だから、あなただけのルートコンポーネント、addNavigationHelpersと各コンポーネントをラップする必要はありません。画面間を移動するときにアクションを送信/管理する必要はありません。自動的に更新されます。