使用 Redux 切换主题不起作用

Question

这是我的 configureStore.js 文件

import {createStore, applyMiddleware, compose, combineReducers} from 'redux';
import thunk from 'redux-thunk';
import {persistStore, persistReducer} from 'redux-persist';
import AsyncStorage from '@react-native-async-storage/async-storage';

import {stateReducer, themeReducer, authReducer} from './index';

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: ['themeReducer'],
};

const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const rootReducer = combineReducers({stateReducer, themeReducer, authReducer});
const persistedReducer = persistReducer(persistConfig, rootReducer);

export default () => {
  let store = createStore(
    persistedReducer,
    composeEnhancer(applyMiddleware(thunk)),
  );
  let persistor = persistStore(store);
  return {store, persistor};
};

我在此文件中添加了redux-persist，因为我希望主题在更改时保持不变。此设置时没有出现错误，但是当我尝试更改主题时，它不会切换。我使用

访问了主题的状态

const theme = useSelector(state => state.themeReducer.theme) 

这是themeReducer

import {lightTheme, darkTheme, SWITCH_THEME} from '../../components/index';

const initialState = {
  theme: lightTheme,
};

const themeReducer = (state = initialState, action) => {
  switch (action.type) {
    case SWITCH_THEME:
      return {
        theme: action.theme,
      };
    default:
      return state;
  }
};

export default themeReducer;

这是switchTheme 操作

import {SWITCH_THEME} from './../../redux';

export const switchTheme = theme => {
  try {
    return dispatch => {
      dispatch({
        type: SWITCH_THEME,
        theme: theme,
      });
    };
  } catch (error) {
    console.log(error);
  }
};

主题开关位于DrawerContent 文件中，如下所示。 theme.state 有一个布尔值。

   <Drawer.Section>
      <Preferences>Preferences</Preferences>
      <TouchableRipple onPress={() => {
          theme.mode === 'light'
            ? dispatch(switchTheme(darkTheme))
            : dispatch(switchTheme(lightTheme));
          console.log('Theme state: ', theme.state);
          console.log('Theme mode: ', theme.mode);
        }}>
        <View style={styles.preference}>
          <Text style={{color: theme.text}}>Dark Theme</Text>
          <View pointerEvents="none">
            <Switch value={theme.state} />
          </View>
        </View>
      </TouchableRipple>
    </Drawer.Section>

Answer 1

我找到了我的解决方案。我从 themeReducer 的错误位置导入了 SWITCH_THEME。