[英]Side Effects in Redux & React RxJS
Where should you put the API-calls
in Redux ? 你应该在哪里放置
API-calls
在终极版 ?
I think they belong in Actions because they are part of the data
and don't have side-effects. 我认为它们属于Actions,因为它们是
data
一部分,并且没有副作用。
Does that sound right? 听起来对吗?
I want to avoid RxJS or ReduxSaga. 我想避免使用RxJS或ReduxSaga。
I make my API calls in my action file but have a separate function that creates the action itself. 我在动作文件中进行API调用,但有一个单独的函数可自行创建动作。 Regardless I am agreeing with you in that API Calls work best (in our collective opinion) alongside action creators.
无论如何我都同意您的观点,即API调用与动作创建者一起(在我们的集体看来)是最好的。
Create Scenarios 创建方案
For point 2,3 Thunk middleware is the best option as it is much easier than Saga. 对于2,3点, Thunk中间件是最好的选择,因为它比Saga容易得多。
This is a can of worms in the redux
world and there are many approaches. 这是
redux
世界中的redux
蠕虫,并且有很多方法。 The main idea is to execute functions that have access to the store's dispatch
method so that these functions can orchestrate their own sequence of actions to the store. 主要思想是执行可以访问商店的
dispatch
方法的功能,以便这些功能可以协调自己对商店的操作顺序。 However, each approach dresses up the function execution and the inherent statefulness of side effects (eg waiting for an API call to finish before dispatching the “done” action to the store) in a different way: 但是,每种方法都以不同的方式来修饰函数执行和副作用的固有状态(例如,等待API调用完成,然后再将“完成”操作分派给商店):
The imperative solution is thunks which are just plain old functions. 必要的解决方案是thunk ,它们只是普通的旧函数。 When the store receives a thunk, instead of running the thunk through the reducer like a regular object action, the store executes the thunk while passing the store's
dispatch
function so that the thunk can orchestrate its own sequence of actions. 当商店收到一个thunk时,它不会像常规对象操作那样通过减速器运行thunk,而是在传递商店的
dispatch
功能的同时执行thunk,以便thunk可以编排自己的动作序列。 See redux-thunk
for an example. 有关示例,请参见
redux-thunk
。
redux-saga
is a declarative solution where you dispatch action objects that describe how the side effect is to be carried out. redux-saga
是一种声明式解决方案,您可以在其中调度描述如何执行副作用的操作对象。 For example, if the side effect is fetching from an API then the action contains the fetch function and the arguments to be passed to the fetch function. 例如,如果副作用是从API提取,则该操作包含提取函数和要传递给提取函数的参数。 For example, if the fetch call is
fetchFromServer(a, b, c)
then the action you dispatch contains fetchFromServer
, a
, b
and c
. 例如,如果fetch调用是
fetchFromServer(a, b, c)
则您分派的操作将包含fetchFromServer
, a
, b
和c
。 The stateful part of the side effects is kept inside generator functions called “sagas”. 副作用的有状态部分保留在称为“ sagas”的生成器函数中。
redux-observable
is another declarative solution but instead of using generators for “statefulness”, it uses observables. redux-observable
是另一个声明性解决方案,但它不是使用生成器来实现“状态”,而是使用了observable。 Observables can be a bit non-intuitive so I won't go much into it here but it is the solution that I used. 可观察变量可能有点不直观,因此我在这里不做过多介绍,但这是我使用的解决方案。 Honestly, the latter two are, to some extent, two sides of the same coin but I find observables a more elegant abstraction.
老实说,后两者在某种程度上是同一枚硬币的两个侧面,但我发现可观察到的更为抽象。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.