用承诺修改状态

Question

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

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

如何正确执行此操作，以便我真正获取数据。

这是我的状态照片：

如你所见，isFetched在promise完成后并没有变为真，并且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

我怀疑你想使用其中之一

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

但不是那个总是 returns 对 undefined 的承诺 - 它只使用 await 而不是 return.

Answer 2

它不起作用的原因是您使用了标准字符串而不是 JS 模板。替换：

'${TEST_USER_PHONE}_REJECTED'

与：

`${TEST_USER_PHONE}_REJECTED`

用承诺修改状态

Modifying state with promises

javascript

react-native

redux

react-redux

redux-promise-middleware

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