关于不带中间件的Redux异步(redux-thunk,redux-saga ...)

Min*_*ang 4 javascript reactjs redux redux-thunk redux-saga

一些动作具有异步功能,例如提取。但是,我不想使用像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}))
})

...
Run Code Online (Sandbox Code Playgroud)

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

小智 5

Redux常见问题解答“我如何表示“副作用”,例如AJAX调用?

通常,Redux建议将具有副作用的代码作为动作创建过程的一部分。尽管可以在UI组件内部执行该逻辑,但通常将其提取到可重用的函数中是有意义的,这样可以从多个位置(即动作创建者函数)调用相同的逻辑。

您发布的功能是动作创建者,因此似乎确实是放置它们的地方,但是在下一段中,他们说:

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

有什么理由反对使用redux-thunk,redux-saga,redux-loop等?它们全都可以帮助您。您可以选择手动执行副作用,但是与使用IMO进行中间件管理相比,管理起来较难。