Redux中的初始狀態無法正常工作

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

那是因為當您創建這樣的reducer時：

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

您將擁有一個看起來像這樣的狀態：

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

通過查看您的減速器初始狀態：

const initialState = {
    isVisible: false
}

您應該以這種方式訪問​​它：在組件內部的state.isVisible.isVisible ，這是因為您的reducer只負責狀態的isvisible部分（而不是整個狀態）

TLDR

您的第一個化{isVisible: false|true }器返回一個對象： {isVisible: false|true } ，因此，每當您要訪問狀態時，都應這樣操作： state.isVisible.isVisible ，而在第二個示例中，化state.isVisible.isVisible器將返回布爾值true|false ，這就是為什么訪問state.isVisible可以正常工作的原因。