redux-saga:如何以编程方式为yield创建多个调用/副作用?

iti*_*nce 9 ecmascript-6 reactjs react-native redux redux-saga

使用redux-saga,可以并行执行多个效果:

import { call } from 'redux-saga/effects'

// correct, effects will get executed in parallel
const [users, repos]  = yield [
  call(fetch, '/users'),
  call(fetch, '/repos')
]
Run Code Online (Sandbox Code Playgroud)

如何以编程方式创建这些"call"-calls ?

我想要实现的是:

让我说我有一个不同参数的数组,我想每个参数执行一个服务器请求,但与redux-saga并行:

const parameters = ['abc', 'def', 'ghi']

const allMyFetchCalls  = parameters.map( (p) => makeCallRequestWithParameter(p) );
Run Code Online (Sandbox Code Playgroud)

makeCallRequestWithParameter将创建一个函数调用:(或者在终极版-SAGA-讲话的效果)调用(提取,PARAM)在像收率调用(提取,PARAM)

const resultArray = yield allMyFetchCalls;
Run Code Online (Sandbox Code Playgroud)

这是可能的,如果是的话,怎么样?

kuy*_*kuy 16

请注意,call效果当时不会调用任何内容.它只是创建Plain JavaScript Object并返回.所以你想要的并不是那么困难.

import { call } from 'redux-saga/effects'

const params = ['abc', 'def', 'ghi']
const responses  = yield params.map(p => call(fetch, p))
Run Code Online (Sandbox Code Playgroud)


Jos*_*ose 6

因此,根据截至 2019 年 11 月 17 日的redux saga 文档,为了使其并行执行,您需要使用 all()

yield all( arrayOfSomething.map( eachSomthing => call( myFunction, eachSomething ) ) )
Run Code Online (Sandbox Code Playgroud)

或者如果你想在打电话之前计算一些东西

yield all( arrayOfSomething.map( eachSomthing => {
   // do some computations

   // important you return the function which is automatically done 
   // for you in the one line map, this has gotten me a few 
   // times with I am just coding fast
   return call( myFunction, eachSomething ) )
} )
Run Code Online (Sandbox Code Playgroud)


小智 5

这可能也有效https://github.com/redux-saga/redux-saga/tree/master/docs/api#alleffects

function* mySaga() {
  const { customers, products } = yield all({
    customers: call(fetchCustomers),
    products: call(fetchProducts)
  })
}
Run Code Online (Sandbox Code Playgroud)