Как мне дождаться двух действий, чтобы отправить другое действие

Я ищу способ отправить действие, если знаю, что отправлено несколько действий. Я знаю, что могу сделать это сейчас, сохранив некоторые переменные в магазине. Но есть ли лучший способ сделать это (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')
);

reactjs redux redux-saga
person Ravi    schedule 09.07.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Вы можете сделать это в саге просто:

yield all([
  take(REQUIRED_ACTION1),
  take(REQUIRED_ACTION2),
])
yield put({type: FINAL_ACTION})
person Martin Kadlec    schedule 10.07.2018

arrow_upward
0
arrow_downward

Действия должны быть понятными и полными, рекомендуется отправлять действия со всей необходимой информацией в их полезных данных.

Еще одна причина, по которой вы всегда должны пробовать, - это отправка различных действий в зависимости от их целей и использование инструментов Redux для правильной отладки вашего приложения. Redux обновляет состояния синхронно, и это на самом деле преимущество его конструкции. При этом вы знаете, что когда одно действие проходит через все редукторы, у вас будет правильное состояние, отражающее изменения в вашей части пользовательского интерфейса.

Если вы полагаетесь на два действия, вы в некоторой степени не можете полагаться на один источник истины, которым являются ваши действия1 и действия2. И это заставляет вас ждать обоих в промежуточном программном обеспечении и превращает ваши действия в эффекты, а эффекты используются в другом контексте.

person Amin Paks    schedule 09.07.2018
comment
Эти 2 рассматриваемых действия являются асинхронными. Я бы не смог отправить всю информацию одним действием - person Ravi; 10.07.2018
comment
Хорошо, я вижу. Опять же, это не изменит характера действий. Если это эффекты, я бы подумал о том, чтобы сделать их одним и отправить одно действие с результатами двух асинхронных вызовов. Какую библиотеку вы используете для асинхронных вызовов? - person Amin Paks; 10.07.2018
comment
Я использую аксиомы для звонков. - person Ravi; 10.07.2018
comment
Хорошо, тогда вы должны либо объединить Promises вместе, либо использовать async / awaits, собрать всю информацию вместе и отправить одно действие с правильной полезной нагрузкой. Вам нужно, чтобы я обновил ответ правильным образцом кода? - person Amin Paks; 10.07.2018
comment
Мне это не кажется правильным. Я не хочу, чтобы оба звонка были соединены вместе - person Ravi; 10.07.2018