javascript - 关于没有中间件的 Redux Async (redux-thunk, redux-saga...)

Question

有些 Action 有异步功能，比如fetch。但是，我不想使用像 redux-thunk 或 redux-saga 这样的中间件。 所以，我犹豫要不要使用这个代码。

/* actions */

...

export const fetchRequest = ({category, query, dispatch}) => ({
    type: actionTypes.FETCH_REQUEST,
    promise:
        fetch(`${API_URL}${category}?${query}`, {headers: headers})
        .then(response => response.json())
        .then(data => dispatch(fetchRecieve(data))),
})

export const fetchRecieve = data => ({
    type: actionTypes.FETCH_RECIEVE,
    data,
})

...

/* In x.jsx */
...

const mapDispatchToProps = dispatch => ({
onClick: (category, query) => dispatch(fetchRequest({category, query, dispatch}))
})

...

此代码是否违反了 Redux 范式？

Answer 1

Redux FAQ "How can I represent “side effects” such as AJAX calls?..

In general, Redux suggests that code with side effects should be part of the action creation process. While that logic can be performed inside of a UI component, it generally makes sense to extract that logic into a reusable function so that the same logic can be called from multiple places—in other words, an action creator function.

您发布的功能是 Action 创建者，因此放置它们似乎是一个合适的地方，但是在下一段中他们说:

The simplest and most common way to do this is to add the Redux Thunk middleware that lets you write action creators with more complex and asynchronous logic. Another widely-used method is Redux Saga which lets you write more synchronous-looking code using generators, and can act like “background threads” or “daemons” in a Redux app. Yet another approach is Redux Loop, which inverts the process by allowing your reducers to declare side effects in response to state changes and have them executed separately. Beyond that, there are many other community-developed libraries and ideas, each with their own take on how side effects should be managed.

您有什么理由反对使用 redux-thunk、redux-saga、redux-loop 等吗？它们的存在都是为了真正帮助你。您可以选择手动执行副作用，但在 IMO 中使用中间件执行它的管理较少。