Expo/React-Native/React-redux - Reducer 不更新存储

Question

你好stackoverflow首次发布，请指南，如果完成了，我目前正在研究练习的天气应用程序，但是我遇到了一个问题，即更新了我在商店" focusedIndex"中添加的新属性。

它的工作方式是我从存储在商店中的一个阵列中单击城市。索引用于在数组中获取数据，但我想存储该索引，因为我想用它来获取其LAT，以后在GoogleMap组件中进行LON。

。

1）在cityfocuscontainer.js中，我触发了动作。

2）还原器确实会触发正确的方法并显示适当的数据。（简单号码 - 我还用Typeof进行了仔细检查）

3）分配传递给状态的新值

4）恢复的退出和应用程序的其余部分继续，返回了商店的最终状态，focusIndex保持与初始状态（1）永不更改相同。

任何帮助都将不胜感激，请让我知道是否有任何问题

reducer.js

const initialState = {
isLoading                                  : false, 
currentLocation                            : {},
localWeather                               : {},
weatherList                                : [],
listCounter                                : 1,
focusedCity                                : [],
focusListCounter                           : 1,
focusedCurrent                             : {},
focusIndex                                 : 1 }; 
case 'FOCUS_INDEX'                     :
        console.log("This is Focus Index " + action.fIndex)
return {
            ...state,
            focusIndex    : action.fIndex,
        }

cityfocuscontainer.js

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { getWeatherAsync, getAdditionalWeatherAsync } from '../utils/weatherFuncs'
import CityWeather from '../components/CityWeather'
import WeatherForDays from '../components/WeatherForDays'
import { View, Text } from 'react-native'
import GoogleMap from '../components/googleMap';
class CityWeatherContainer extends Component {
async componentDidMount () {
    this.props.setLoading()
    const { navigation } = this.props
    const cityIndex = navigation.getParam('cityListIndex', 'NO-ID') 
    const focusedCity = this.props.cityList[cityIndex - 1]
    this.props.setIndex({ CI : navigation.getParam('cityListIndex', 'NO-ID')});
    const highNoon = "12:00:00"
<--- some more code here ---> 
this.props.loading ? <Text>loading....</Text> : <GoogleMap />
<--- some more code here ---> 
const mapStateToProps = state => {
return {
    cityList         : state.weatherList,
    f_cityList       : state.focusedCity,
    loading          : state.isLoading
}
}
const mapDispatchToProps = dispatch => {
return {
    setLoading       : ()               => dispatch ({type : 'SET_LOADING'}),
    storeCityInFocus : (cityI)          => dispatch ({type : 'FOCUSED_CITY', cityinfo : cityI }),
    storeFocusC      : (focusedCurrent) => dispatch ({type : 'FOCUSED_CURRENT', cFocused : focusedCurrent}),
    resetData        : ()               => dispatch ({type : 'CLEAR_CITY_DATA'}),
    setIndex         : (indexToBeSent)  => dispatch ({type : 'FOCUS_INDEX', fIndex : indexToBeSent}),
}
}
export default connect(mapStateToProps, mapDispatchToProps)(CityWeatherContainer)

googlemap.js

class GoogleMap extends Component {
componentDidMount () {
    console.log("This is the index " + this.props.cIndex)
}
<--- some more code here ---> 
const mapStateToProps = state => {
return {
    cityList         : state.weatherList,
    cIndex           : state.focusIndex
}
}
export default connect(mapStateToProps)(GoogleMap);

Answer 1

case 'FOCUS_INDEX'                     :
        console.log("This is Focus Index " + action.fIndex.CI)
return {
            ...state,
            focusIndex    : action.fIndex,
        }

您到处都有定义为FocusIndex的值，但是您将其称为组件映射中的focusedIndex：

const mapStateToProps = state => {
return {
    cityList         : state.weatherList,
    cIndex           : state.focusedIndex
}
}

更新组件映射到FocusIndex，然后重试

Answer 2

谢谢您的帮助，即使现在我不确定在哪里犯了错误，即使我修复了所有变量名称，我也遇到了问题，重新启动模拟器和缓存，并且可以正常工作。