javascript - react redux-thunk 将状态包装在另一个状态中
问题描述
我是新手,现在我使用 redux 和 redux-thunk 创建了一个简单的应用程序,它异步调用 API。这是我的游戏gameAction:
export const fetchGamesStartAsync = () => {
return dispatch => {
dispatch(fetchGamesStart());
axiosGenCfg.post('/game/get',{
"page" : 1,
"size" : 10
})
.then(({ res }) => {
dispatch(fetchGamesSuccess(res));
})
.catch(err => {
dispatch(fetchGamesFailure(err.message));
});
}
};
const fetchGamesStart = () => ({
type: gameActionTypes.FETCH_GAMES_START,
});
const fetchGamesFailure = () => ({
type: gameActionTypes.FETCH_GAMES_FAILURE,
});
const fetchGamesSuccess = (games) => ({
type: gameActionTypes.FETCH_GAMES_SUCCESS,
payload:{
...games
}
});
这是我的gameReducer:
const INITIAL_STATE= {
gamesList : null,
isFetching: false,
errorMessage : undefined
};
const gameReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
case gameActionTypes.FETCH_GAMES_START:
return{
...state,
isFetching: true
};
case gameActionTypes.FETCH_GAMES_SUCCESS:
return{
...state,
isFetching: false,
gamesList: action.payload
};
case gameActionTypes.FETCH_GAMES_FAILURE:
return{
...state,
isFetching: false,
errorMessage: action.payload
};
default:
return {
state
};
}
};
并在rootReducer
export default combineReducers({
admin : adminReducer,
game: gameReducer,
})
我还添加了 redux-logger 来检查状态,这就是我在控制台中得到的
那么为什么我的游戏对象中有 2 级状态呢?管理对象也一样。在我将 redux-thunk 添加到项目之前,我没有这个问题。在添加 redux-thunk 之前currentAdmin
是 admin
. 但是现在之间有一个状态对象。
解决方案
default:
return {
state
};
应该只是
default:
return state
现在任何时候你点击default
,state.whatever
正在变成state.state.whatever
推荐阅读
- dialogflow-es - 导入 DialogFlow v1 代理失败
- python - Python从文件中打印随机行而不重复
- python-3.x - 这个带有多个连接的 python 打印语句有什么问题?
- android - 如何在待机/打盹模式下保持活动任务进入前台服务?
- javascript - 推送数据时在 TypeScript 中键入数组
- apache-spark - Spark 会在 GPU-RAM 之前读入 CPU-RAM 吗?
- sql - 带有 NoSQL 的 Django
- ruby-on-rails - Rails 6 - NoMethodError(nil:NilClass 的未定义方法“titleize”)
- mysql - 发生数据库错误:这与 sql_mode=only_full_group_by 不兼容
- python-3.x - 在对象中实现类似 numpy 的切片