React native 如何在不同屏幕中使用切换状态并存储值？

我已经设置了减速机和动作，这样当切换开关时，它是真的还是假的，我的目标是在开关为

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);

从“../context/PreferencesContext”导入{PreferencesContext}；
从'@reduxjs/toolkit'导入{bindActionCreators}；
从“../../actions/TogleActions”导入*作为HeaderSwitchTogleActionCreator；
从'react redux'导入{connect}；
类型Props=抽屉内容组件Props；
const appVersion=DeviceInfo.getVersion（）
导出功能抽屉内容（道具：道具）{
const paperTheme=useTheme（）；
const{theme，toggleRTL，toggleTheme}=React.useContext（PreferencesContext）；
const translateX=动画。插值（props.progress{
输入范围：[0,0.5,0.7,0.8,1]，
输出范围：[-100，-85，-70，-45,0]，
});
返回(
{
props.navigation.toggleDrawer（）；
}}>
{/*  */}
名字
标题
0
马上就来
0
马上就来
(
)}
label=“Profile”
onPress={（）=>{}
/>
{props.isActive？空：(
(
)}
label=“商店”
onPress={（）=>{}
/>
)}
(
)}
label=“设置”
onPress={（）=>props.navigation.navigate（'Settings'）}
/>
);
}
常量mapStateToProps=（状态）=>({
isActive:state.headerSwitchToggleReducer.isActive，
});
连接（MapStateTops）（抽屉内容）；

我想你的意思是保持这种状态，现在我面临另一个问题。。我得到了以下错误

TypeError:undefined不是一个对象（评估'state.modalReducer.modal.id'）

，我用store和reducer索引更新了我的问题，这里是modal文件和@diedu