Redux連携

React Navigationを使用したアプリでReduxを使用するのは非常に簡単です。基本的にはReact Navigationがない場合と違いはありません。

import { Provider } from 'react-redux';
import { NavigationContainer } from '@react-navigation/native';

// Render the app container component with the provider around it
export default function App() {
  return (
    <Provider store={store}>
      <NavigationContainer>{/* Screen configuration */}</NavigationContainer>
    </Provider>
  );
}

コンポーネントを、通常`react-redux`で行うように、`Provider`でラップすることに注意してください。はい、完了です！これで、アプリ全体で`connect`を自由に使用できます。

optionsでconnectされたコンポーネントを使用する

コンポーネントを作成し、ストアに`connect`してから、そのコンポーネントを`title`で使用します。

function Counter({ value }) {
  return <Text>Count: {value}</Text>;
}

const CounterContainer = connect((state) => ({ value: state.count }))(Counter);

<Stack.Screen
  name="Test"
  component={TestScreen}
  options={{ title: () => <CounterContainer /> }}
/>

関心のある状態をパラメータとして画面に渡す

値が変わる可能性がない場合は、接続されたコンポーネントから別の画面にパラメータとして渡すことができます。

<Button
  title="Go to static counter screen"
  onPress={() =>
    props.navigation.navigate('StaticCounter', {
      count,
    })
  }
/>

function StaticCounter({ route }) {
  return (
    <View style={styles.container}>
      <Text style={styles.paragraph}>{route.params.count}</Text>
    </View>
  );
}

そのため、コンポーネントは次のようになります

<RootStack.Screen
  name="StaticCounter"
  component={StaticCounter}
  options={({ route }) => ({ title: route.params.count })}
/>

ナビゲーション状態をReduxにも保存できますか？

これは不可能です。自己破壊してアプリを遅くしたり、壊したりする可能性が高すぎるため、サポートしていません。

ただし、redux-devtools-extensionを使用して、ナビゲーション状態とアクションを検査したり、devtoolsパッケージを使用してタイムトラベルデバッグを実行したりすることは可能です。