agraboso / agraboso/redux-api-middleware

Bailout during REQUEST

未關閉
#94 3 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視
enhancement question
主要語言
JavaScript
星號
1.5k
分支
190
PR 合併指標
30 天內沒有已合併 PR

描述

My application consist of multiple components that do a request when they are constructed. The problem is a request should only be done once because otherwise there are multiple requests to the same endpoint. Initially I attempted to get the required state in the bailout method and check if the store was `inProgress`. After some attempts I however found out that bailout is only checked upon initialization and not checked again pre-action.

Setting `inProgress: true` on my REQUEST (`GIFTS_LOAD`) does not work like I expect it to work. Below you can check out my temporary solution to prevent duplicate request from being executed. The reason is that the components listen to the state anyway, thus only a single set of actions should be executed.

_The concept behind this is based on the following:_
http://www.zohaib.me/redux-call-service-async/
http://redux.js.org/docs/advanced/AsyncActions.html (search for `shouldFetchPosts`)

How can I solve this in a cleaner way or is this how it's supposed to work?

**Action**

``` js
export function getGifts(accountId) {
return function(dispatch) {
dispatch({
[CALL_API]: {
endpoint: `${baseConfig.apiBaseUrl}${accountId}/gifts/`,
method: 'GET',
types: [types.GIFTS_LOAD, types.GIFTS_LOAD_SUCCESS, types.GIFTS_LOAD_FAILURE],
bailout: (state) => {
if (!(state.gift.fetched || state.gift.inProgress)) {
dispatch({ type: types.GIFTS_PENDING });
}

//Cancel request if already in progress
return !!(state.gift.fetched || state.gift.inProgress);
},
headers,
credentials: 'same-origin'
}
});
};
}
```

**Reducer**

``` js
export default function gift (state = initialState, action) {
switch (action.type) {
case types.GIFTS_PENDING:
return {
...state,
inProgress: true
};
case types.GIFTS_LOAD_SUCCESS:
return {
...state,
gifts: action.payload,
fetched: true,
inProgress: false,
error: false
};
case types.GIFTS_LOAD_FAILURE:
return {
...state,
inProgress: false,
error: true
};
case types.CLAIM_GIFT_SUCCESS:
return {
...state,
gifts: mutate(state, action)
};
default:
return state;
}
};
```

貢獻指南

開啟貢獻指南

評估

這個 Issue 還沒有評估資料。

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。