![](/img/trans.png)
[英]Local state working properly but when I try the same with Redux it doesn't work
[英]Initial state in redux doesn't work properly
我想显示<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;
}
那是因为当您创建这样的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
可以正常工作的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.