Question

My React组件需要异步获取一些数据A，然后根据其内容发送第二个异步请求以获取数据B.所有结果都存储在Redux中，我们使用Redux-thunk。

页面上可能同时有几个组件都需要A，因此很有可能它已经存在于Redux中;但是另一个组件也可以获取它，然后isFetching为真。我不希望有多个相同的请求（尤其是因为浏览器取消了它们）。

https://github.com/reactjs/redux/issues/1676和https://github.com/reactjs/redux/issues/723等顺序操作的解决方案提出了一个返回promise的redux-thunk，如果该对象已经存在，则已经解析; e.g：

function getA(uuid) {
    return (dispatch, getState) => {
        const currentA = getState().a[uuid];

        if (currentA) {
            // Return resolved promise with the already existing object
            return Promise.resolve(currentA);
        } else {
            // Return async promise
            return goFetchA(uuid).then(objectA => {
                dispatch(receivedA(uuid, objectA));
                return objectA;
            });
        }
    };
}

function getAthenB(uuidA, uuidB) {
    return dispatch => 
        dispatch(getA(uuidA)).then(
            objectA => dispatch(getB(objectA, uuidB)));
}

到目前为止，这么好。但是，如果状态包含对象和'isFetching'布尔值，我可以返回什么样的承诺？如果我们可以在状态中存储请求的实际Promise，这将是微不足道的，但是那种事情不应该进入Redux状态。

function getA(uuid) {
    return (dispatch, getState) => {
        const currentA = getState().a[uuid];

        if (currentA) {
            if (!currentA.isFetching) {
                return Promise.resolve(currentA.data);
            } else {
                // WHAT TO RETURN HERE?
            }
        } else {
            dispatch(startFetchingA(uuid));
            return goFetchA(uuid).then(objectA => {
                receivedObjectA(uuid, objectA);
                return objectA;
            });
        }
    };
}

当我想要取消正在进行的请求时，存在类似的问题 - 它没有存储在任何地方，所以一个也有帮助的解决方案将是理想的。

Answer 1

我认为，如果不引入一些可变的，不可序列化的存储，它将存储正在运行的请求，以及纯粹的，完全可序列化的Redux存储，那么就无法处理这种情况。

有很多库可以帮助你处理这种副作用（Redux Saga和Redux Observable，仅举几例）。但是如果你的情况仅限于你刚才描述的情况，我会建议使用Redux Thunk的extra argument feature，我相信，这是专为这种情况设计的。

如何使用额外参数实现任务的快速草图：

/**
 * init.js
 */
const api = ...; // creating api object here
const requests = {};

const store = createStore(
  reducer,
  applyMiddleware(thunk.withExtraArgument({api, requests}))
)

/**
 * actions.js
 */
function getA(uuid) {
    return (dispatch, getState, {api, requests}) => {
        if (requests[uuid]) return requests[uuid];

        const currentA = getState().a[uuid];
        if (currentA) {
             return Promise.resolve(currentA.data);
        }

        dispatch(startFetchingA(uuid));
        const request = requests[uuid] = api.fetchA(uuid);
        return request.then(objectA => {
            delete requests[uuid];
            receivedObjectA(uuid, objectA);
            return objectA;
        });
    };
}

可以使用相同的技术取消请求。

此外，你可以通过介绍custom Redux middleware来获得更清晰的解决方案，但这实际上取决于你真正的成熟案例，而不是简化的案例。

Redux中的顺序异步操作和isFetching

1 个答案: