代码之家  ›  专栏  ›  技术社区  ›  smellerbee

如何等待两个操作分派另一个操作

  •  1
  • smellerbee  · 技术社区  · 7 年前

    我正在寻找一种方法,一旦我知道已经发送了多个操作,就可以发送一个操作。我知道现在可以通过存储一些变量来实现这一点。但是有没有更好的方法来做这件事(传奇,发现)等。我试图通过他们的文件,但不知道是否可以用于这个目的。

    例如,在下面的代码中,当我知道已经分派了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')
    );
    
    2 回复  |  直到 7 年前
        1
  •  2
  •   Martin Kadlec    7 年前

    在传奇中,你只需:

    yield all([
      take(REQUIRED_ACTION1),
      take(REQUIRED_ACTION2),
    ])
    yield put({type: FINAL_ACTION})
    
        2
  •  0
  •   Amin Paks    7 年前

    操作必须是自解释的和完整的,这是一个很好的实践,在他们的有效负载中发送包含所有所需信息的操作。

    您应该经常尝试的另一个原因是,根据不同的操作的目的分派不同的操作,并利用redux工具正确地调试您的应用程序。redux同步更新状态,这实际上是它设计的一个优势。也就是说,当一个操作通过所有的reducer时,您将拥有适当的状态来反映ui部分的更改。

    如果你依靠两个行动,你就不能依靠一个单一的真相来源,那就是你的行动1和行动2。这将迫使您在中间件中等待这两种情况,并将您的操作转换为效果,效果将在不同的上下文中使用。