用promises修改状态

Question

为什么我的承诺实际上没有更新Redux中的状态？

我正在使用redux-promise-middleware。当我调用我的API时，它会执行_PENDING和_FULFILLED的承诺步骤，但状态永远不会更新以反映更改。

如何正确地执行此操作，以便实际获取数据。

这是我的州的照片：

正如您所看到的，isFetched在履行承诺后不会成立，data永远不会将返回的响应数据加载到自身中。

这是我的API助手：

class UserAPI {

     ...

     async testPhone(user) {
         await axios.post(this.testPhonePath, {
             phone: user.phone
         })
         .then(function(response) {
             return response.data
         })
         .catch(function(error) {
             return error.response.data
         })
     }
}

我的行动：

import { UserAPI } from '../../constants/api'

const userAPI = new UserAPI()

export const TEST_USER_PHONE = 'TEST_USER_PHONE'

export const testUserPhone = (user) => ({
    type: TEST_USER_PHONE,
    payload: userAPI.testPhone(user)
})

我的减速机：

＆＃13;

＆＃13;

import {
    TEST_USER_PHONE
} from './actions'

const INITIAL_STATE = {
    testedByPhone: {
        data: [],
        isFetched: false,
        error: {
            on: false,
            message: null
        }
    }
}

export default (state = INITIAL_STATE, action) => {
    switch(action.type) {
        case '${TEST_USER_PHONE}_PENDING':
            return INITIAL_STATE
        case '${TEST_USER_PHONE}_FULFILLED':
            return { 
                testedByPhone: {
                    data: action.payload,
                    isFetched: true,
                    error: {
                        on: false,
                        message: null
                    }
                }
            }
        case '${TEST_USER_PHONE}_REJECTED':
            return { 
                testedByPhone: {
                    data: [],
                    isFetched: true,
                    error: {
                        on: true,
                        message: action.payload
                    }
                }
            }
        default:
            return state
    }
}

＆＃13;

＆＃13;

＆＃13;

这是我的商店

＆＃13;

＆＃13;

import { createStore, applyMiddleware, compose } from 'redux'
import promiseMiddleware from 'redux-promise-middleware'

import reducers from './reducers'

const middleware = [
    promiseMiddleware()
]

if (__DEV__) {
    const logger = require('redux-logger')

    middleware.push(logger())
}

const enhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose

export default createStore(
    reducers,
    undefined,
    enhancers(applyMiddleware(...middleware))
)

＆＃13;

＆＃13;

＆＃13;

Answer 1

它不工作的原因，是你使用标准字符串而不是JS模板。 替换：

'${TEST_USER_PHONE}_REJECTED'

使用：

`${TEST_USER_PHONE}_REJECTED`

Answer 2

我怀疑你想要使用

testPhone(user) {
    return axios.post(this.testPhonePath, {
        phone: user.phone
    }).then(function(response) {
        return response.data
    }, function(error) {
        return error.response.data
    });
}

或

async testPhone(user) {
    try {
        const response = await axios.post(this.testPhonePath, {
            phone: user.phone
        });
        return response.data
    } catch(error) {
        return error.response.data
    }
}

但当前的混合总是返回undefined的承诺 - 它只使用await而不是return。