Redux Thunk не работает для нескольких вызовов API

Question

Моя отправка Redux thunk работала до тех пор, пока я не сделал один API-вызов, но перестал работать после использования combReducers для нескольких вызовов API.

Это мой код компонента:

const mapStateToProps = state => ({
    loading: state.loading,
    data: state.data,
    error: state.error,
    networkError: state.networkError
})

const mapDispatchToProps = {
    login
}

Это мои действия:

export const GET_LOGIN_LOADING = "GET_LOGIN_LOADING"
export const GET_LOGIN_SUCCESS = "GET_LOGIN_SUCCESS"
export const GET_LOGIN_ERROR = "GET_LOGIN_ERROR"

export const GET_REGISTER_LOADING = "GET_REGISTER_LOADING"
export const GET_REGISTER_SUCCESS = "GET_REGISTER_SUCCESS"
export const GET_REGISTER_ERROR = "GET_REGISTER_ERROR"

Это мой редуктор для действий при входе и регистрации:

import * as Actions from './Actions'

const loginState = {
    loginLoading: false,
    loginData: [],
    loginError: '',
}

const registerState = {
    registerLoading: false,
    registerData: [],
    registerError: '',
}

export const loginReducer = (state = { loginState }, action) => {
    switch (action.type) {
        case Actions.GET_LOGIN_LOADING:
            return {
                ...state,
                loginLoading: action.payload
            }

        case Actions.GET_LOGIN_SUCCESS:
            return {
                ...state,
                loginData: action.payload,
                loginLoading: false,
            }

        case Actions.GET_LOGIN_ERROR:
            return {
                ...state,
                loginError: action.payload,
                loginLoading: false,
            }

        default: return loginState
    }
}

export const registerReducer = (state = { registerState }, action) => {
    switch (action.type) {
        case Actions.GET_REGISTER_LOADING:
            return {
                ...state,
                registerLoading: action.payload
            }

        case Actions.GET_REGISTER_SUCCESS:
            return {
                ...state,
                registerData: action.payload,
                registerLoading: false,
            }

        case Actions.GET_REGISTER_ERROR:
            return {
                ...state,
                registerError: action.payload,
                registerLoading: false,
            }

        default: return registerState
    }
}

Мой код магазина Redux:

import { createStore, applyMiddleware, combineReducers } from 'redux'
import thunk from 'redux-thunk'
import{ loginReducer, registerReducer } from '../redux/Reducer'

const reducer = combineReducers({loginReducer, registerReducer})

export default createStore(reducer, applyMiddleware(thunk))

Наконец-то использовался мой thunk-код для совершения вызовов API:

export const login = (countryCode, phone, password) => {
    const userName = {
        countryCode,
        phone
    }
    return dispatch => {
        dispatch(getLoginLoading(true))
        service.post('login', {
            userName,
            password
        })
            .then(response => {
                console.log(response.data)
                dispatch(getLoginSuccess(response.data))
            })
            .catch(error => {
                console.log(error)
                dispatch(getLoginError(error.response.data))
            })
    }
}

export const register = (name, countryCode, phone) => {
    return dispatch => {
        dispatch(getRegisterLoading(true))
        service.post('register', {
            name,
            countryCode,
            phone,
        })
            .then(response => {
                console.log(response.data)
                dispatch(getRegisterSuccess(response.data))
            })
            .catch(error => {
                console.log(error.response)
                dispatch(getRegisterError(error.response))
            })
    }
}

Answer 1

Наконец-то нашел ответ сам. Когда вы используете комбинированные редукторы, Redux создает вложенный объект состояния для каждого редуктора, поэтому при доступе к состоянию вы должны использовать:

const reducer = combineReducers({loginReducer, registerReducer})


const mapStateToProps = state => ({
    loading: state.loginReducer.loading,
    data: state.loginReducer.data,
    error: state.loginReducer.error,
    networkError: state.loginReducer.networkError
})