redux 中的初始状态无法正常工作答案

【问题标题】：Initial state in redux doesn't work properlyredux 中的初始状态无法正常工作
【发布时间】：2018-05-07 13:05:21
【问题描述】：

我想显示<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;
 }

【问题讨论】：

标签： javascript reactjs redux state

【解决方案1】：

那是因为当你像这样创建一个 reducer 时：

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

你将有一个看起来像这样的状态：

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

通过查看你的减速器初始状态：

const initialState = {
    isVisible: false
}

你应该这样访问它：state.isVisible.isVisible 在你的组件中，那是因为你的 reducer 只负责 isvisible 状态的一部分（而不是整个状态）

TLDR

你的第一个 reducer 返回一个对象：{isVisible: false|true }，所以无论何时你想访问状态，你都应该这样做：state.isVisible.isVisible，而在你的第二个例子中，你的 reducer 返回一个布尔值true|false，那就是为什么在访问state.isVisible 时它工作得很好。

【讨论】：