Экспо / React-Native / React-redux - Редуктор не обновляет магазин

Question

Здравствуйте, Stackoverflow при первой публикации. Если вы сделали ошибку неправильно, в настоящее время я работаю над приложением weatherApplication для практики, но у меня возникла проблема с обновлением нового атрибута, который я добавил в свой магазин "selectedIndex".

Как это работает, я нажимаю на город в массиве, который я храню в магазине.Индекс используется для получения данных в массиве, но я хочу сохранить этот индекс, так как я хочу использовать его, чтобы получить его широту, позже в компоненте googleMap.

1) В CityFocusContainer.js я запускаю действие.

2) Редуктор запускает правильный метод и отображает соответствующие данные.(Простое число - я также дважды проверил с typeof)

3) Присвойте новое значение, которое было передано в состояние

4) Редуктор выходит, а остальная часть приложения продолжается и конечное состояниемагазина возвращается, focusIndex остается тем же, что и исходное состояние (1), никогда не меняется.

Любая помощь будет принята с благодарностью. Пожалуйста, дайте мне знать, если есть какие-либо вопросы

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

Спасибо за помощь, даже сейчас я не уверен, где я допустил ошибку, потому что даже когда я исправил все свои имена переменных, у меня была проблема, но я спрятал, заново сделал свою работу, перезапустил эмуляторы и кеш, и это работает,

Answer 2

case 'FOCUS_INDEX'                     :
        console.log("This is Focus Index " + action.fIndex.CI)

return {
            ...state,
            focusIndex    : action.fIndex,
        }

У вас везде есть значение, определенное как focusIndex, но оно вызывается какfoxIndex в сопоставлении компонента:

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

Обновите сопоставление компонента до focusIndex и повторите попытку