时间戳

首页 > 解决方案 > 在选项卡之间导航时 Redux 状态变得不确定

reactjs - 在选项卡之间导航时 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)

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;

谁能帮我解决这个问题。

标签： reactjsreact-nativereduxreact-reduxreact-router

解决方案

似乎问题出在减速器中，您只返回更新的键值对而不是完整的减速器状态。所以每次更新reducer之后都会只有一个键值对，最后更新的一个。添加...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);

推荐阅读