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

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

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

Редуктор.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

Вкладка 1

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

Вкладка 3

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

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

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
1
0
592
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 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.info('obj', obj);
console.info('newObj', newObj);

И у меня есть вопрос, является ли метод, которым я следовал, правильным способом использования редукса? или я что-то еще пропустил ??

Janaki Narayanan 06.06.2019 09:24

вроде нормально, одно предложение: попробуйте использовать один редьюсер для одного компонента контейнера, это поможет вам поддерживать код :)

Mayank Shukla 06.06.2019 10:47

Другие вопросы по теме