Состояние Redux становится неопределенным при переходе между вкладками

Question

У меня есть три вкладки в моем приложении. Я использовал для получения значений из каждой и сохранения данных на третьей вкладке. Приложение работает нормально, если порядок навигации не изменился. (Т.е.) Tab1 -> Tab2 -> tAB3.

Но если при переходе из Tab3 -> Tab2 -> Tab3. Значение из Tab1 становится нулевым. аналогично, когда я перемещаюсь из Tab3 -> Tab1 -> Tab3. Значение из Tab2 становится нулевым.

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

})

// вставка значений с использованием функции --- redux

   const mapDispatchToProps = dispatch => ({
   insertExternalCoordinates: (value) => dispatch({ type: 
  'insertExternalCoordinates', value: value })
  });


export default connect(mapStateToProps, mapDispatchToProps) 
(CheckOutExternal)

Таб2

//Saving state ---redux
const mapStateToProps = state => ({
insertCheckInOutControls: state.insertCheckInOutControls

})

// вставка значений с использованием функции --- 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

})

// вставка значений с использованием функции --- 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 ----- магазин создан

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;

Может кто-нибудь помочь мне решить эту проблему.

Answer 1

Кажется, проблема в редукторе, вы возвращаете только обновленную пару ключ-значение вместо полного состояния редуктора.Таким образом, после каждого обновления будет иметь только одну пару ключ-значение, последнюю обновленную.Добавьте ...state к каждому возвращаемому объекту, он сохранит другие свойства.

Напишите редуктор следующим образом:

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

Проверьте этот пример для получения более подробной информации:

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