如何在其他屏幕中使用切换状态并存储值？

Question

我已经设置了减速器和动作，以便在切换开关时，它是对还是错，而我的目标是在开关为true时隐藏抽屉部分，而在false时显示抽屉部分，并且我将如何存储它，以便在用户关闭应用程序时切换状态。

这是我的动作文件：

import { TOGGLE_SWITCH } from './ActionsTypes';

export const headerSwitchToggleAction = (data) => (
 dispatch, getState) =>
{
 dispatch(switchToggleActive(data));
};
const switchToggleActive = data => {
 return ({
   type: TOGGLE_SWITCH,
   payload: data,
});
};

这是我的减速器：

import { TOGGLE_SWITCH } from '../actions/ActionsTypes';

const initialState = {
 isActive: true,
};
const headerSwitchToggleReducer = (state = initialState, action) => {
switch (action.type) {
case TOGGLE_SWITCH:
 return {
   isActive: action.payload,
 };
default:
 return state;
 }
};
export default headerSwitchToggleReducer;

这是商店：

// Middleware: Redux Persist Config
const persistConfig = {
  // Root
  key: 'root',
  // Storage Method (React Native)
  storage: AsyncStorage,
}

const persistedReducer = persistReducer(persistConfig, rootReducer);

// Redux: Store
const store = createStore(
  persistedReducer,
  applyMiddleware(
    createLogger(),
  ),
);

let persistor = persistStore(store);

export {
  store,
  persistor,
};

/* export default configureStore({
  reducer: combineReducers({
    modal: ModalReducer,
    headerSwitchToggleReducer,
  }),
}); */

以下是减速器索引：

import { combineReducers } from 'redux';

import {ModalReducer} from './ModalReducer';
import switchToggleReducer from './ToggleReducer'

// Redux: Root Reducer
const rootReducer = combineReducers({
    modalReducer: ModalReducer,
    switchReducer: switchToggleReducer,
  });
  // Exports
  export default rootReducer;

这就是我要呼叫isActive的地方：

import {PreferencesContext} from '../context/PreferencesContext';
import {bindActionCreators} from '@reduxjs/toolkit';
import * as headerSwitchToggleActionCreator from '../../actions/ToggleActions';
import {connect} from 'react-redux';

type Props = DrawerContentComponentProps<DrawerNavigationProp>;

const appVersion = DeviceInfo.getVersion()

export function DrawerContent(props: Props) {
  const paperTheme = useTheme();
  const {theme, toggleRTL, toggleTheme} = React.useContext(PreferencesContext);

  const translateX = Animated.interpolate(props.progress, {
    inputRange: [0, 0.5, 0.7, 0.8, 1],
    outputRange: [-100, -85, -70, -45, 0],
  });

  return (
    <DrawerContentScrollView {...props}>
      <Animated.View
        //@ts-ignore
        style={[
          styles.drawerContent,
          {
            backgroundColor: paperTheme.colors.surface,
            transform: [{translateX}],
          },
        ]}>
        <View style={styles.userInfoSection}>
          <TouchableOpacity
            style={{marginLeft: 10}}
            onPress={() => {
              props.navigation.toggleDrawer();
            }}>
            {/* <Avatar.Image
              source={{
                uri:
                  'https://pbs.twimg.com/profile_images/952545910990495744/b59hSXUd_400x400.jpg',
              }}
              size={50}
            /> */}
          </TouchableOpacity>
          <Title style={styles.title}>Firstnanme Lastname</Title>
          <Caption style={styles.caption}>Title</Caption>
          <View style={styles.row}>
            <View style={styles.section}>
              <Paragraph style={[styles.paragraph, styles.caption]}>
                0
              </Paragraph>
              <Caption style={styles.caption}>Coming soon</Caption>
            </View>
            <View style={styles.section}>
              <Paragraph style={[styles.paragraph, styles.caption]}>
                0
              </Paragraph>
              <Caption style={styles.caption}>Coming soon</Caption>
            </View>
          </View>
        </View>
        <Drawer.Section style={styles.drawerSection}>
          <DrawerItem
            icon={({color, size}) => (
              <MaterialCommunityIcons
                name="account-outline"
                color={color}
                size={size}
              />
            )}
            label="Profile"
            onPress={() => {}}
          />
          {props.isActive ? null : (
            <DrawerItem
              icon={({color, size}) => (
                <MaterialCommunityIcons
                  name="cart-plus"
                  color={color}
                  size={size}
                />
              )}
              label="Store"
              onPress={() => {}}
            />
          )}
          <DrawerItem
            icon={({color, size}) => (
              <MaterialCommunityIcons name="cog" color={color} size={size} />
            )}
            label="Settings"
            onPress={() => props.navigation.navigate('Settings')}
          />
        </Drawer.Section>
      </Animated.View>
    </DrawerContentScrollView>
  );
}

const mapStateToProps = (state) => ({
  isActive: state.headerSwitchToggleReducer.isActive,
});

connect(mapStateToProps)(DrawerContent);