Перейти к содержанию

Интеграция с Redux

Использовать Redux в приложении с React Navigation очень просто. Оно практически ничем не отличается от приложения без React Navigation.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
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>
    );
}

Обратите внимание, что мы обернули наши компоненты в Provider, как это обычно делается с react-redux. Та-да! Теперь можно смело использовать connect во всем приложении.

Использование компонента, который connect подключен в options.

Создайте компонент, connect его к хранилищу, а затем используйте этот компонент в title.

1
2
3
4
5
6
7
function Counter({ value }) {
    return <Text>Count: {value}</Text>;
}

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

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

Передайте экрану интересующее вас состояние в качестве параметра

Если не предполагается, что значение будет меняться, можно просто передать его от подключенного компонента другому экрану в качестве параметра.

1
2
3
4
5
6
7
8
<Button
    title="Go to static counter screen"
    onPress={() =>
        props.navigation.navigate('StaticCounter', {
            count,
        })
    }
/>

1
2
3
4
5
6
7
8
9
function StaticCounter({ route }) {
    return (
        <View style={styles.container}>
            <Text style={styles.paragraph}>
                {route.params.count}
            </Text>
        </View>
    );
}

Таким образом, наш компонент будет выглядеть следующим образом:

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

Можно ли хранить состояние навигации и в Redux?

Это невозможно. Мы не поддерживаем эту возможность, потому что слишком легко выстрелить себе в ногу и замедлить / сломать приложение.

Однако можно использовать redux-devtools-extension для просмотра состояния навигации и действий, а также для отладки путешествий во времени с помощью пакета devtools.

Ссылки

Комментарии