CODEWITHSUNDEEP
reactjsreact-nativereduxreact-reduxreact-router
Janaki Narayanan
Janaki Narayanan

Reputation: 543

Redux state is getting undefined while navigating between tabs

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.

Upvotes: 1

Views: 1076

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104379

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

Upvotes: 1

Related Questions