当应用程序刷新时，使用redux响应本地主题切换消失

Question

我是react native中一名相当新的应用程序开发人员。在我的应用程序中，我创建了一个工作正常的自定义复选框。我想用这些复选框切换主题。然而，我使用了redux state，这是切换主题的，没有问题。但当我重新运行应用程序时，选定的主题消失了。请帮帮我！

import { SET_SWITCH_THEME } from "./actions";//themeReducer.js
const INITIAL_STATE={
theme: ''
}
export function themeReducer(state=INITIAL_STATE,action){
switch (action.type){
case 'SET_SWITCH_THEME':
return{...state,theme:action.payload};
default:
return state;
}
}

export const SET_SWITCH_THEME='SET_SWITCH_THEME';//actions.js
export const switchTheme= (theme) =>{
return{type:SET_SWITCH_THEME, payload:theme}
}

import {themeReducer} from "./themeReducer";//rootReducer.js
export default combineReducers({
themeState:themeReducer,
})

import {createStore,applyMiddleware} from "redux";//store
import thunk from "redux-thunk";
import rootReducer from "./rootReducer";
const store=createStore(rootReducer,applyMiddleware(thunk));
export default store;

const App: () => Node = () => {//App.js
useEffect(() => {
SplashScreen.hide();
requestUserPermission().then(r=>{});
NotificationListener();
},
[])
return (
<Provider store={store}>
<MainNavigator />
</Provider>
);
};

import {useDispatch, useSelector} from "react-redux";//Settings.js (switched theme in this screen)
import {switchTheme} from "../store/redux/actions";
import CustomCheckBox from "../components/CheckBox"; //my custom checkbox component
import AsyncStorage from "@react-native-async-storage/async-storage";
const dispatch=useDispatch();
const {theme}=useSelector(state=>state.themeState);
const [checked, setChecked] = useState('default');
const changeTheme=async(mode)=>{
setChecked(mode);
dispatch(switchTheme(mode));
await AsyncStorage.setItem('@theme', JSON.stringify(mode));
setModalVisible(!modalVisible);
}
<View style={{ justifyContent:'center', alignItems:'center', flexDirection:'row', padding:3, flex:1}}>
<CustomCheckBox  color={'#fff'} text="Default Theme" status={checked === 'default' ? 'checked' : 'unchecked'} onChange={()=> changeTheme('default')}/>
<CustomCheckBox  color={'#fff'} text="Koyu Mod" status={checked === 'dark' ? 'checked' : 'unchecked'} onChange={()=>temaSec('dark')}/>
</View>//i want switch themes with custom checkbox like this

<View style={theme==='dark'?styles.rootContainer:defaultStyles.rootContainer}>//Also, there is a components withs switch theme styles conditionally
</View>

Answer 1

就我所见，你只是存储在异步存储中，而不是提取它，在重新加载和刷新时，redux数据会被刷新，

有两种方法，您可以使用AsyncStorage来存储特定的主题，下次只需检查是否设置了任何内容，然后ovveride默认值，如：

import {useDispatch, useSelector} from "react-redux";//Settings.js (switched theme in this screen)
import {switchTheme} from "../store/redux/actions";
import CustomCheckBox from "../components/CheckBox"; //my custom checkbox component
import AsyncStorage from "@react-native-async-storage/async-storage";
const dispatch=useDispatch();
const {theme}=useSelector(state=>state.themeState);
const [checked, setChecked] = useState('default');
const changeTheme=async(mode)=>{
setChecked(mode);
dispatch(switchTheme(mode));
await AsyncStorage.setItem('@theme', JSON.stringify(mode));
setModalVisible(!modalVisible);
}
//this is added
const checkForAlreadyTheme = useCallback(async() => {
const result = await AsyncStorage.getItem('@theme');

if(result){
dispatch(switchTheme(result));
}

},[])
//this is added
useEffect(() =>{

checkForAlreadyTheme()

},[checkForAlreadyTheme])
<View style={{ justifyContent:'center', alignItems:'center', flexDirection:'row', padding:3, flex:1}}>
<CustomCheckBox  color={'#fff'} text="Default Theme" status={checked === 'default' ? 'checked' : 'unchecked'} onChange={()=> changeTheme('default')}/>
<CustomCheckBox  color={'#fff'} text="Koyu Mod" status={checked === 'dark' ? 'checked' : 'unchecked'} onChange={()=>temaSec('dark')}/>
</View>//i want switch themes with custom checkbox like this

<View style={theme==='dark'?styles.rootContainer:defaultStyles.rootContainer}>//Also, there is a components withs switch theme styles conditionally
</View>

希望这有帮助，你也可以使用redux-persistent，这将为你的在异步存储中保存整个reducer状态