Redux state is getting undefined while navigating between tabs - reactjs

Question

I have three tabs in my application.I used to get values from each and save the data in the third tab.The application works fine if the navigation order is not changed.(i.e)Tab1-->Tab2-->Tab3.
But if when I navigate from Tab3-->Tab2-->Tab3 .The value from the Tab1 gets null.
similarly when I navigate from Tab3-->Tab1-->Tab3 .The value from the Tab2 gets null.
Reducer.js
const initialState = {
external: [],
internal: [],
usercode:'',
vehicleImage:'',
checkInoutcontrols:[]
}
const Reducer = (state = initialState, action) => {
switch (action.type) {
case 'insertExternalCoordinates':
return { external: action.value }
case 'insertInternalCoordinates':
return { internal: action.value }
case 'insertUserCode':
return {usercode:action.value}
case 'insertImage':
return {vehicleImage:action.value}
case 'insertCheckInOutControls':
return {checkInoutcontrols:action.value}
}
return state;
}
export default Reducer
Tab1
//Saving state ---redux
const mapStateToProps = state => ({
external: state.external
})
//inserting values using function --- redux
const mapDispatchToProps = dispatch => ({
insertExternalCoordinates: (value) => dispatch({ type:
'insertExternalCoordinates', value: value })
});
export default connect(mapStateToProps, mapDispatchToProps)
(CheckOutExternal)
Tab2
//Saving state ---redux
const mapStateToProps = state => ({
insertCheckInOutControls: state.insertCheckInOutControls
})
//inserting values using function --- redux
const mapDispatchToProps = dispatch => ({
insertCheckInOutControls: (value) => dispatch({ type:
'insertCheckInOutControls', value: value })
});
export default connect(mapStateToProps, mapDispatchToProps)
(CheckOutParts)
Tab3
//Saving state ---redux
const mapStateToProps = state => ({
insertCheckInOutControls: state.insertCheckInOutControls
external:state.external,
usercode: state.usercode,
checkInoutcontrols:state.checkInoutcontrols
})
//inserting values using function --- redux
const mapDispatchToProps = dispatch => ({
insertExternalCoordinates: (value) => dispatch({ type:
'insertExternalCoordinates', value: value }),
insertCheckInOutControls: (value) => dispatch({ type:
'insertCheckInOutControls', value: value })
});
export default connect(mapStateToProps, mapDispatchToProps)
(CheckOutSignature)
Apps.js -----store is created
import React, {Component} from 'react';
import {KeyboardAvoidingView} from 'react-native';
import AppNavigation from './main';
import Reducer from './modules/Reducers';
import {Provider} from 'react-redux'
import {createStore} from 'redux';
const store = createStore(Reducer)
const App = () => ({
render() {
return (
<Provider store={store}>
<AppNavigation/>
</Provider>
);
}
})
export default App;
Can anyone help me to solve this.

Answer 1

It seems issue is in the reducer, you are only returning the updated key-value pair instead of full reducer state. So after each update reducer will have only one key-value pair, the last updated one. Add ...state to each object you are returning, it will keep the other properties.
Write you reducer like this:
const Reducer = (state = initialState, action) => {
switch (action.type) {
case 'insertExternalCoordinates':
return { ...state, external: action.value }
case 'insertInternalCoordinates':
return { ...state,, internal: action.value }
case 'insertUserCode':
return { ...state,, usercode:action.value }
case 'insertImage':
return { ...state, vehicleImage:action.value }
case 'insertCheckInOutControls':
return { ...state, checkInoutcontrols:action.value }
}
return state;
}
Check this example for more details:
let obj = { a:1, b: 2 };
function update(key, value) {
switch(key) {
case 'a': return { ...obj, a: value }
case 'b': return { ...obj, b: value }
}
return obj;
}
let newObj = update('a', 10);
console.log('obj', obj);
console.log('newObj', newObj);