用承诺修改状态

Question

为什么我的 Promise 并没有真正更新 Redux 中的状态？

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

我该如何正确地做到这一点，以便我真正得到我的数据。

---

这是我的状态图片：

如您所见，isFetched 在 promise 完成后不会变为 true，并且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)
})

---

还有我的减速机：

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
    }
}

---

这是我的商店

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))
)

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。