Question

某些动作具有异步功能，例如提取。但是，我不想使用像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?..

通常，Redux建议将具有副作用的代码作为动作创建过程的一部分。虽然可以在UI组件内部执行该逻辑，但是通常可以将逻辑提取到可重用的函数中，以便可以从多个位置（即动作创建者函数）调用相同的逻辑。

您发布的函数是动作创建者，因此似乎确实是放置它们的地方，但是在下一段中，他们说：

最简单，最常见的方法是添加Redux Thunk中间件，该中间件使您可以使用更复杂和异步的逻辑编写动作创建者。另一个广泛使用的方法是Redux Saga，它使您可以使用生成器编写更具同步外观的代码，并且可以在Redux应用程序中充当“后台线程”或“守护程序”。另一个方法是Redux Loop，它通过允许您的reducer声明副作用以响应状态更改并使它们单独执行来反转过程。除此之外，还有许多其他社区开发的库和构想，每个都对如何管理副作用有自己的看法。

您是否有任何理由反对使用redux-thunk，redux-saga，redux-loop等？它们全都可以帮助您。您可以选择手动执行副作用，但是使用IMO进行中间件管理的难度较小。

Answer 2

将dispatch注入您的动作创建者中并将其用于您需要的任何东西都是完全可以的。

如果您打算在不同的地方重用这种逻辑，那么从组件中将更多逻辑外包到您的操作（或中间件）中实际上是一件好事。 completely legit中，动作内部的逻辑可能还包括延迟分派的异步操作（如您的情况）或分派其他多个动作的操作。如果是redux-thunk，则称为composition。

与“ redux-thunk-way”相比，您的解决方案在某种程度上是“捷径”，在这种情况下，您的thunk将首先通过中间件传播，然后立即通过redux-thunk反转控制。借助redux-thunk，除了getState之外，您还可以获得dispatch的注入，这使您可以直接访问整个商店（如果没有redux-thunk，则必须诉诸{{ 3}}，以便同时访问存储和调度。

dispatch与动作的绑定通过redux-thunk更加标准化，它使用了curring，因此mapDispatchToProps内部的样板代码更少，看起来更简洁（因为您没有每次都自己注入dispatch。

关于不带中间件的Redux异步（redux-thunk，redux-saga ...）

2 个答案: