简体   繁体   English

反应 redux-thunk 将 state 包装在另一个 state 中

[英]react redux-thunk wraps state inside another state

Im new to react, now Im creating a simple app using redux and redux-thunk which calls an API asynchronously.我是新手,现在我使用 redux 和 redux-thunk 创建一个简单的应用程序,它异步调用 API。 Here is my game gameAction:这是我的游戏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
    }
});

and this is my gameReducer:这是我的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
            };
    }
};

and in rootReducer并在rootReducer

export default combineReducers({
    admin : adminReducer,
    game: gameReducer,

})

I also added redux-logger to check state and this is what i get in console我还添加了 redux-logger 来检查 state 这就是我在控制台中得到的在此处输入图像描述

So why there are 2 levels of state in my game object?那么为什么我的游戏object中有2个级别的state呢? and also the same with admin object.管理员 object 也一样。 before i add redux-thunk to project, I didn't have this problem.在我将 redux-thunk 添加到项目之前,我没有这个问题。 before adding redux-thunk currentAdmin was direct child of admin .在添加 redux-thunk currentAdmin之前是admin的直接子级。 But now there is a state object between.但是现在之间有一个state object。

default:
        return {
            state
        };

should just be应该只是

default:
        return state

Right now any time you hit the default , state.whatever is becoming state.state.whatever现在任何时候你点击defaultstate.whatever变成state.state.whatever

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM