Question

我无法理解如何重写正常的action / reducer代码以使用redux-thunk或redux-promise-middleware，因此我可以使用promises。

我想等到我的updatePhone在启动testUserPhone之前完成更新我的state.user.information.phone。显然我需要从updatePhone返回承诺。

this.props.updatePhone('+1**********')
.then(() => this.props.testUserPhone(this.props.user.information.phone))

动作

export const updatePhone = (phone) => ({
    type: UPDATE_PHONE,
    payload: phone
})

和reducer

export default (state = INITIAL_STATE, action) => {
    switch(action.type) {
        case 'UPDATE_PHONE':
            return {...state, 
                information: {
                    ...state.information,
                    phone: action.payload
                }
            }
        default:
            return state
    }
}

我应该写这样的东西以及基本功能，还是我能以某种方式将它们组合成一个？因为我需要通过我的reducer完全完成其循环的操作并在它返回之前更新phone，但我不想破坏我的reducer，因为现在它将无法访问payload因为它在返回的函数内部 - 与你开始使用这些库的方式非常混淆。

export function updatePhoneAsync(phone) {
    return dispatch({
        type: UPDATE_PHONE,
        payload: phone
    })
}

编辑：所以我现在已经为我的动作创作者

了

export const updatePhone = (phone) => ({
    type: UPDATE_PHONE,
    payload: phone
})

export function updatePhoneAsync(phone) {
    return function (dispatch) {
        dispatch(updatePhone(phone))
    }
}

在我的组件之外;

this.props.updatePhoneAsync('+1**********')
.then(() => this.props.testUserPhone(this.props.user.information))

这给了我一个错误'cannot read property then of undefined'

Answer 1

如果你使用redux-thunk，你应该写这样的东西：

行动创作者：

function update (params if you need them) {
    return function (dispatch) {
        send request here
            .then(data =>
                dispatch(phoneUpdated(data));
}

function phoneUpdated(phone) {
    return {type: 'PHONE_UPDATED', phone};
}

然后，随意在您的reducer中抓取此动作并根据需要更新状态。

此外，如果承诺被拒绝，或者在显示加载器动画的请求开始时，您可以使用其他操作来增强它

如何重写基本动作/减速器以使用promises

1 个答案: