There is a section in my application where menu settings can be made.With these settings, users will be able to see the screens they want. I keep these settings in a redux array and update them with switches and store them in async storage. But where I change and save the settings, it doesn't work as I want because the redux array is updated late. When I click the button 2 times, it works as expected. Otherwise it works like async functions. Please help me.
//screen reducer
import {SET_CHANGE_MENU} from "./actions";
const INITIAL_STATE={
screen:[
{name:'Screen1',value:true},
{name:'Screen2',value:true},
{name:'Screen3',value:true},
{name:'Screen4',value:true},
{name:'Screen5',value:true},
{name:'Screen6',value:true},
{name:'Screen7',value:true},
{name:'Screen8',value:true},
{name:'Screen9',value:true},
{name:'Screen10',value:true},
{name:'Screen11',value:true},
{name:'Screen12',value:true},
{name:'Screen13',value:true},
{name:'Screen14',value:true},
{name:'Screen15',value:true},
{name:'Screen16',value:true},
{name:'Screen17',value:true},
{name:'Screen18',value:true},
{name:'Screen19',value:true},
]
}
export function screenReducer(state=INITIAL_STATE, action){
switch (action.type){
case 'SET_CHANGE_MENU':
return {
...state,
screen: state.screen.map(item => {
if (item.name === action.payload.name) {
return action.payload;
}
return item;
}),
};
default:
return state;
}
}
//settings
const {screen}=useSelector(state=>state.screenState);
const [Screen1Value,setScreen1Value]=useState(screen[0].value);
const [Screen2Value,setScreen2Value]=useState(screen[1].value);
const [Screen3Value,setScreen3Value]=useState(screen[2].value);
const [Screen4Value,setScreen4Value]=useState(screen[3].value);
const [Screen5Value,setScreen5Value]=useState(screen[4].value);
const [Screen6Value,setScreen6Value]=useState(screen[5].value);
const [Screen7Value,setScreen7Value]=useState(screen[6].value);
const [Screen8Value,setScreen8Value]=useState(screen[7].value);
const [Screen9Value,setScreen9Value]=useState(screen[8].value);
const [Screen10Value,setScreen10Value]=useState(screen[9].value);
const [Screen11Value,setScreen11Value]=useState(screen[10].value);
const [Screen12Value,setScreen12Value]=useState(screen[11].value);
const [Screen13Value,setScreen13Value]=useState(screen[12].value);
const [Screen14Value,setScreen14Value]=useState(screen[13].value);
const [Screen15Value,setScreen15Value]=useState(screen[14].value);
const [Screen16Value,setScreen16Value]=useState(screen[15].value);
const [Screen17Value,setScreen17Value]=useState(screen[16].value);
const [Screen18Value,setScreen18Value]=useState(screen[17].value);
const [Screen19Value,setScreen19Value]=useState(screen[18].value);
const SaveMenu=async(Screen1Value,Screen2Value,Screen3Value,Screen4Value,Screen5Value,Screen6 Value,Screen7Value,Screen8Value,Screen9Value,Screen10Value,Screen11Value,Screen12Value,Screen13Value,Screen14Value,
Screen15Value, Screen16Value,Screen17Value,Screen18Value,Screen19Value)=>{
try{
dispatch(changeMenu('Screen1', Screen1Value));
dispatch(changeMenu('Screen2',Screen2Value));
dispatch(changeMenu('Screen3',Screen3Value));
dispatch(changeMenu('Screen4',Screen4Value));
dispatch(changeMenu('Screen5',Screen5Value));
dispatch(changeMenu('Screen6',Screen6Value));
dispatch(changeMenu('Screen7',Screen7Value));
dispatch(changeMenu('Screen8',Screen8Value));
dispatch(changeMenu('Screen9',Screen9Value));
dispatch(changeMenu('Screen10',Screen10Value));
dispatch(changeMenu('Screen11',Screen11Value));
dispatch(changeMenu('Screen12',Screen12Value));
dispatch(changeMenu('Screen13',Screen13Value));
dispatch(changeMenu('Screen14',Screen14Value));
dispatch(changeMenu('Screen15',Screen15Value));
dispatch(changeMenu('Screen16',Screen16Value));
dispatch(changeMenu('Screen17',Screen17Value));
dispatch(changeMenu('Screen18',Screen18Value));
dispatch(changeMenu('Screen19',Screen19Value));
const jsonValue = JSON.stringify(screen)
AsyncStorage.setItem('@screen', jsonValue).then(r=>{});
}catch (e) {
console.log(e);
}
return(
<View>
<View style={[styles.centeredView,theme==='dark'?{backgroundColor: '#282828'}:null,{marginTop:'5%'}]}>
<Text style={[styles.title, theme==='dark'?{color:'#fff'}:null,{marginTop:'10%',}]}>MENU SETTINGS</Text>
</View>
<View style={{justifyContent:'center', alignItems:'center'}}>
<View style={{flexDirection:'row', margin:5, justifyContent:'space-around'}}>
<Text style={[styles.title, theme==='dark'?{color:'#fff'}:null,{textAlign:'left'},]}>Screen 1</Text>
<Switch
trackColor={{ false: "#767577", true: "#31b031" }}
thumbColor={Screen1Value? "#fff" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={(value)=> setScreen1Value(!Screen1Value)}
value={Screen1Value}
style={{marginLeft:'35%'}}
/>
</View>
<View style={{flexDirection:'row', margin:5}}>
<Text style={[styles.title, theme==='dark'?{color:'#fff'}:null,{textAlign:'left', marginRight:10}]}>Screen 2</Text>
<Switch
trackColor={{ false: "#767577", true: "#31b031" }}
thumbColor={Screen2Value? "#fff" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={()=>setScreen2Value(!Screen2Value)}
value={Screen2Value}
style={{marginLeft:'35%'}}
/>
</View>
<View style={{flexDirection:'row', margin:5}}>
<Text style={[styles.title, theme==='dark'?{color:'#fff'}:null,{textAlign:'left'}]}>Screen 3</Text>
<Switch
trackColor={{ false: "#767577", true: "#31b031" }}
thumbColor={Screen3Value? "#fff" : "#f4f3f4"}
ios_backgroundColor="#3e3e3e"
onValueChange={()=>setScreen3Value(!Screen3Value)}
value={Screen3Value}
style={{marginLeft:'35%'}}
/>
</View> //and so on all screens
<View style={{justifyContent:'center', alignItems:'center', marginTop:8}}>
<View style={theme==='dark'?[{backgroundColor:Colors.accent100}, Platform.OS === 'android'? {borderRadius:24} : {borderRadius:0}]:[{backgroundColor:Colors.primary500,}, Platform.OS === 'android'? {borderRadius:24} : {borderRadius:0}]}>
<PrimaryButton onPress={()=>SaveMenu(Screen1Value,Screen2Value,Screen3Value,Screen4Value,Screen5Value,Screen6Value,Screen7Value,Screen8Value,Screen9Value,Screen10Value,Screen11Value,Screen12Value,Screen13Value,Screen14Value,
Screen15Value, Screen16Value,Screen17Value,Screen18Value,Screen19Value)}>Save Menu Settings</PrimaryButton>
</View>
</View>
</View>
</View>
)
