Разница между Redux-Logic и Redux-thunk - PullRequest
Новая
       1

Разница между Redux-Logic и Redux-thunk

1 голос
/ 03 июля 2019

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

1 Ответ

3 голосов
/ 03 июля 2019

  1. Redux-thunk - это очень простое (около 10 строк кода) промежуточное ПО, которое позволяет отправлять функции . Это все, что он делает.

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

  2. Redux-logic гораздо более гибкий и мощный промежуточный программный продукт. Это позволяет выразить свое намерение при написании кода.

Этот образец взят из документации 

const fetchPollsLogic = createLogic({

  // declarative built-in functionality wraps your code
  type: FETCH_POLLS, // only apply this logic to this type
  cancelType: CANCEL_FETCH_POLLS, // cancel on this type
  latest: true, // only take latest

  // your code here, hook into one or more of these execution
  // phases: validate, transform, and/or process
  process({ getState, action }, dispatch, done) {
      axios.get('https://survey.codewinds.com/polls')
          .then(resp => resp.data.polls)
          .then(polls => dispatch({ type: FETCH_POLLS_SUCCESS,
                            payload: polls }))
          .catch(err => {
              console.error(err); // log since could be render err
              dispatch({ type: FETCH_POLLS_FAILED, payload: err,
                    error: true })
       })
       .then(() => done()); // call done when finished dispatching
    }
});

Этот образец извлекает данные, но его намерение и этапы (в данном случае это только один этап, процесс) ясно из кода.

То же самое с использованием Redux-thunk приведет к такому коду 

const fetchPollsLogic = () => (dispatch) => {
    axios.get('https://survey.codewinds.com/polls')
       .then(resp => resp.data.polls)
       .then(polls => dispatch({ type: FETCH_POLLS_SUCCESS,
                            payload: polls }))
       .catch(err => {
           console.error(err); // log since could be render err
           dispatch({ type: FETCH_POLLS_FAILED, payload: err,
                 error: true })
        })
 }

Код по сути такой же, но отсутствует декларативный стиль, разделение на этапы и т. Д.

Я могу порекомендовать читать через логику редукса, так как она намного мощнее и гибче по сравнению с логикой редукса

...