Redux thunk dispatch 不适用于多个 api 调用答案

【问题标题】：Redux thunk dispatch does not work for multiple api callsRedux thunk dispatch 不适用于多个 api 调用
【发布时间】：2020-07-21 23:06:57
【问题描述】：

我的 Redux thunk 调度一直在工作，直到我进行了一次 API 调用，但在使用 combineReducers 进行多个 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))
            })
    }
}

【问题讨论】：

标签： react-native redux react-redux

【解决方案1】：

终于自己找到了答案。当你使用 combine reducer 时，Redux 会为每个 reducer 创建一个嵌套的 state 对象，因此在访问 state 时你应该使用：

const reducer = combineReducers({loginReducer, registerReducer})


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

【讨论】：