我目前正在使用Redux的动作创建器来调度用户操作(例如,获取帐户信息) . 这些操作创建者从API请求返回promise,当他们解析时,更新商店 .

我遇到的问题是我想“拦截”来自API的某些响应,在我的例子中,是一个无效的JWT令牌 . 在这种情况下,我想保留挂起的promise,提示Login模式,如果登录成功,则重新获取并解析promise .

在我以这种方式调用_174837之后检查响应就足够了:

Root.js - 将Modal组件放入DOM中

export default (props) => {
    return (
        <div>
            <Modal />
            <App />
        </div>
    )
}

Modal.js - 处理不同的模态类型(从this post采用的方法)

const MODALS = {
    LOGIN: LoginModal
}

const ModalRoot = ({type, props}) => {
    if (!MODALS[type]) return null;

    return <Modal {...props} />;
}

export default connect(
    state => state.modal
)(ModalRoot);

reducer.js - 模态减速器

const initialState = {type: null, props: {}}
export default function modal(state = initialState, action) {
    switch (action.type) {
        case 'SHOW_MODAL':
            return Object.assign({}, state, {
                type: action.modalType,
                props: {...action.props}
            });
        case 'HIDE_MODAL':
            return initialState;
        default:
            return state;
    }
}

actions.js - 返回获取呼叫的承诺

const promptLogin = () => (dispatch, getState) => {
    return new Promise((resolve, reject) => {
        return dispatch(showModal('LOGIN', {
            successCallback: (user) => resolve(user)
        }));
    })
}

makeAPIRequest.js - 进行API调用,处理无效令牌

fetch(endpoint, requestConfig)
    .then(res => res.json())
    .then(data => {

        /** Invalid JWT Token */
        if (data && data.error_code === 403) {
            return store.dispatch(promptLogin())
                .then(token => {
                    return makeRequest(method, endpoint, headers, body)
                });
        }

        return data;
    });

这种方法的问题在于我将持久化回调函数(为了完成初始请求)到商店,这在redux文档中是不鼓励的 .

如果我的模态组件没有连接到我的获取逻辑,并且我无法在状态中存储Promise或回调(因为它们不可序列化),如何在用户执行后从初始请求继续承诺从模态登录?