Вопрос по callback, reactjs, redux – ... чтобы их можно было использовать так ...

3

ли что-то не так / anti-pattern-ish (с точки зрения 'мышления в реагирующими / перевождь') в добавлен обратный вызовaction.data перешел в действие?

// reducer
ACTION_FOR_REDUCER() {
  var x = 123
  if ( action.data.callback ) action.data.callback( x )
  return {
    something: action.data.somedata
  }
},

Затем доступ к этим данным позже в приложении, когда вызывается действие (возможно, в контейнере)

// later in the app
this.props.dispatch(changeSomething({
  somedata: somedata,
  callback: (x) => { console.log(x) }
}))    

Ваш Ответ

4   ответа
5

Вместо добавления обратного вызова верните обещание из действия (вам понадобитсяперевождь-преобразователь промежуточное программное обеспечение или аналогичная альтернатива).

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

dispatch(myAction).then(callback);

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

const myAction = ...
const callbackAction = ...

const compoundAction = () => dispatch => {
     dispatch(myAction())
         .then(() => dispatch(callbackAction()));
};
0

поэтому при использовании Redux вы должны рассмотреть возможность возврата нового состояния с результатом, например, сdone: true флаг и реагировать на это вcomponentDidUpdate.

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

5

вводный раздел документов) в том, что«изменения сделаны с чистыми функциями».

Чистая функция - это функция, которая всегда возвращает один и тот же результат при одинаковых входных данных и не вызывает никаких побочных эффектов. Наличие журнала обратного вызова, что-то определенно было бы побочным эффектом!

Документы продолжают говорить:

Очень важно, чтобы редуктор оставался чистым. То, что вы никогда не должны делать внутри редуктора:

Мутировать его аргументы;Выполнять побочные эффекты, такие как вызовы API и переходы маршрутизации;Вызовите не чистые функции, например Date.now () или Math.random ().

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

Если вы хотите выполнять побочные эффекты, когда происходит какое-либо действие, вы должны установить промежуточное программное обеспечение, которое позволяет вам это делать - вот некоторые распространенные примеры:

перевождь-преобразователь, который позволяет вам отправлять функции, которые, в свою очередь, могут отправлять действия (обычно используемые для выполнения вызовов API)перевождь-регистратор, который позволяет выйти из действий, которые отправлены.Redux-DevTools-расширение, который позволяет просматривать ваше состояние и действия в расширении Chrome Devtools.

Если вы не можете найти пакет промежуточного программного обеспечения, который делает то, что вам нужно (редко, если честно - там уже много!), Вы можетенаписать свой довольно легко.

Если вы хотите вызвать некоторые внешние API, я бы предложил создать свой собственныйmiddleware Ematipico
Спасибо, я думаю, что я ищу избыточный-thunk. Что касается мутации, разве мутация не происходит позже как частьdispatchа не в самом редукторе? Ed Williams
@Ematipico: добавит некоторые детали о промежуточном программном обеспечении к ответу :) Joe Clay
0

У @Sulthan было решение -редукс

Если это кому-нибудь поможет, вместо того, чтобы писать свои действия, как это ...

export const someAction = data => {
  return {
    type: 'NAMESPACE_SOME_ACTION',
    data: data
  }
}

... вместо этого напишите их так ...

export const someAction = data
  => dispatch
  => Promise.resolve().then(()
  => dispatch({ type: 'NAMESPACE_SOME_ACTION', data }))

... чтобы их можно было использовать так ...

const someFunc = async () => {
  await props.dispatch(someAction(data))
  doAfterWaiting()
}

Похожие вопросы