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

Question

我是 React 的新手，现在我正在使用 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 来检查状态，这就是我在 console 中得到的

那么为什么我的游戏对象中有 2 级状态？并且与管理对象相同。在我将 redux-thunk 添加到项目之前，我没有遇到这个问题。在添加 redux-thunk 之前 currentAdmin 是 admin 的直接子代。但是现在之间有一个状态对象。

Answer 1

default:
        return {
            state
        };

应该只是

default:
        return state

现在，只要您点击 default，state.whatever 就会变成 state.state.whatever

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

react redux-thunk wraps state inside another state

javascript

reactjs

redux

redux-thunk