Начальное состояние в приставке не работает должным образом

Question

Я хочу показать <Alert /> компонент зависит от значения состояния isVisible. Я установил начальное состояние, но оно не работает, хотя я вижу в createLogger, что статус меняется. Что я делаю неправильно? Я использую комбайновые редукторы.

reducer_alert.js

const initialState = {
    isVisible: false
}

export default function (state = initialState, action) {
    switch (action.type) {
        case FETCH_WEATHER:
            return { isVisible: false };
        case FETCH_WEATHER_ERROR: 
            return { isVisible: true };
        }
    return state;
}

index_reducer.js

const rootReducer = combineReducers({
  weather: WeatherReducer,
  isVisible: AlertReducer
});

export default rootReducer;

weather_container.js

 render() {
        return (
            <div>
                {this.props.isVisible ? <Alert alertInfo="Sorry, but city not found." /> : null }
            </div>
        )
    }
}

actions.js

export const FETCH_WEATHER = 'FETCH_WEATHER';
export const FETCH_WEATHER_ERROR = 'FETCH_WEATHER_ERROR';

export function fetchWeather (city) {
    const url = `${ROOT_URL}&q=${city}`;
    const request = axios.get(url);

    return (dispatch) => {
        request
        .then(({data}) => {
            dispatch({type: FETCH_WEATHER, payload: data});
        })
        .catch((error) => { 
            dispatch({type: FETCH_WEATHER_ERROR, payload: error});
        });
    };
}

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

export default function (state = false, action) {
    switch (action.type) {
        case FETCH_WEATHER:
            return false;
        case FETCH_WEATHER_ERROR: 
            return true;
        }
    return state;
 }

Answer 1

Это потому, что когда вы создаете такой редуктор, как этот:

const rootReducer = combineReducers({
  weather: WeatherReducer,
  isVisible: AlertReducer
});

у вас будет состояние, похожее на:

state = {
    weather: ...,
    isVisible: ...
}

И, глядя на исходное состояние вашего редуктора:

const initialState = {
    isVisible: false
}

вы должны получить к нему доступ таким образом: state.isVisible.isVisible внутри вашего компонента, потому что ваш редуктор отвечает только за isvisible часть состояния (а не за все состояние)

TLDR

Ваш первый редуктор возвращает объект: {isVisible: false|true }, поэтому всякий раз, когда вы хотите получить доступ к состоянию, вы должны сделать это так: state.isVisible.isVisible, тогда как во втором примере ваш редуктор возвращает логическое значение true|false, это почему при доступе к state.isVisible он работает просто отлично.