我如何等待 2 个动作来发送另一个动作

Question

我正在寻找一种方法来在我知道已分派多个动作后分派一个动作。我知道我现在可以通过在商店中存储一些变量来做到这一点。但是有没有更好的方法（Saga，Discoverables）等。我试图浏览他们的文档，但无法理解它是否可以用于此目的。

例如，在下面的代码中，当我知道已调度了 2 个必需的操作时，我想在中间件中调度一些操作

import React, { Component } from 'react';
import ReactDOM from 'react-dom'
import {createStore, applyMiddleware} from 'redux'
import {Provider} from 'react-redux'

const dummyReducer = (state=null,action) => {
    return state
}

const defaultAction1 = { type: 'DEFAULT_ACTION1'}
const requiredAction1 = { type: 'REQUIRED_ACTION1'}
const requiredAction2 = { type: 'REQUIRED_ACTION2'}

const middle = (store) => (next) => (action) => {
    if(action.type === 'REQUIRED_ACTION1')
        console.log('Required actions satisfied')
    next(action)
}

const store = createStore(dummyReducer, applyMiddleware(middle))

store.dispatch(defaultAction1)

//Dispatch an action after 2 secs
setTimeout(store.dispatch.bind(null,requiredAction1),2000)
setTimeout(store.dispatch.bind(null,requiredAction2),4000)

class DummyComponent extends Component{
    render(){
        return(<h1> nothing to see here </h1>)
    }
}

ReactDOM.render(<Provider store={store}> 
                    <DummyComponent />
                </Provider>, 
                document.getElementById('root')
);

Answer 1

操作必须是不言自明且完整的，最好在其负载中发送包含所有所需信息的操作。

您应该始终尝试的另一个原因是根据不同的目的分派不同的操作，并利用 Redux 工具正确调试您的应用程序。 Redux 同步更新状态，这实际上是它设计的一个优势。那就是说你知道当一个动作通过所有减速器时你将有适当的状态来反映你的 UI 部分的变化。

如果你依赖于两个动作，你就不能依赖单一的事实来源，即你的 action1 和 action2。这迫使你在中间件中等待这两个，它把你的动作变成效果，效果在不同的上下文中使用。

Answer 2

您可以通过以下方式在 saga 中执行此操作：

yield all([
  take(REQUIRED_ACTION1),
  take(REQUIRED_ACTION2),
])
yield put({type: FINAL_ACTION})

我如何等待 2 个动作来发送另一个动作

How do I wait for 2 actions to dispatch another action

reactjs

redux

redux-saga