Вопрос по react-redux, reactjs, redux-thunk – иначе на редукторах, если нет промежуточного программного обеспечения для запуска.

7

использовать Redux Thunk, тогда можно сделать что-то вроде этого:

ReadableAPI.getCategories().then((categories)=>{
      console.log('after getCategories', categories)

      this.props.dispatch(addCategories(categories))
    })

Разве это не проще и достигает того же?

гдеthis.props приходящий из? Вы разделяете это на модуль действий? Davin Tryon
Используйте thunk, если хотите, чтобы создатели ваших действий были чистыми функциями ... Sandesh K
очень хороший вопрос Bimal Grg
На мой взгляд, оба пути идут хорошо. иногда я предпочел бы некоторую асинхронную логику внутри действия, это сделает код для компонента более чистым Josh Lin

Ваш Ответ

3   ответа
0

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

3

Этот Ответ от Дана Абрамова прекрасно объясняет, почему вы захотите использовать в своем приложении redux-thunk. Еще одно преимущество использования redux-thunk в вашем приложении заключается в том, что вы храните свою бизнес-логику отдельно от части представления (React в вашем случае). У нас был случай, когда наше приложение было написано вbackbone и мы хотели переписать все наше приложение в React. Мы поняли, что это легко, если ваш взгляд и коллекция / модели отдельно. Мы начали обесценивать только HTML-шаблоны, а не коллекции. Когда мы устарели все HTML-шаблоны, мы начали использоватьRedux в нашем приложении и устарели наши коллекции тоже.

Я хочу сказать, что у насview а такжеbusiness Отдельная логика, мы могли бы легко это сделать. Точно так же сReact а такжеRedux, вы хотели бы сохранить это по-другому, так что если что-то новое приходит и заменяетReduxПо крайней мере, вам не придется отказываться от своих взглядов, и вам просто придется изменить свою бизнес-логику.

0

и было неприятно следить за тем, как вы пришли к этому упрощенному решению. Изучив это, я понял, что у вас, вероятно, естьReadableAPI.js файл где-то, что вы должны были опубликовать с конфигурацией, использующей fetch, и внутри нее вы, вероятно, имеете что-то вроде этого:

export const getCategories = () =>
fetch('http://localhost:3001/categories', {headers})
  .then(res => res.json())
  .then(data => console.log(data))

который связан с вашим:

ReadableAPI.getCategories().then((categories)=>{
   console.log('after getCategories', categories)

   this.props.dispatch(addCategories(categories))
})

Таким образом, в этом решении вы возвращаете Обещание, которое является объектом, который, по сути, дает нам уведомление, когда некоторый объем работы, такой как сетевой запрос, завершен, и чтобы получить уведомление, мы связываемся по.then() функция, которую мы передаем функцию стрелки, как вы сделали:then((categories)=> и эта функция стрелки будет вызываться в какой-то момент в будущем.

Похоже, вы ссылаетесь на эти данные какcategories и вы ведете консоль'after Categories', categories.

То, что нам нужно знать, это то, что различные свойства, связанные с этимcategories объект? Есть ли у негоdata свойство? Есть ли у негоresults свойство с некоторыми фактическими данными в нем? Есть лиcategories.data.results что содержит данные?

Так что давайте просто скажем, что ответ «да» на все вопросы.

Вы собираетесь сделать это немного сложным образом, чтобы иметь дело с асинхронными запросами, потому что это не только фрагмент кода, но и то, что находится внутриReadableAPI.js файл, верно? Кроме того, вы используете Promises, которые могут показаться непонятными, и вы бы уже собрали два файла, чтобы справиться с асинхронным запросом, что было бы хорошо, если бы это было просто приложение Reactjs, но вы упомянули свой подход в качестве альтернативы Redux. -Спасибо, что подразумевает использование Redux.

Для вашего подхода в ванильном пространстве Reactjs я бы использовал Axios и реализовалasync/await синтаксис, но с включенным Redux вы не хотите использовать Promise.

Теперь создатель действия, который я должен был сделать вReadableAPI.js Файл не будет работать в среде Redux, потому что он не возвращает простой объект действия JavaScript, и поэтому мы должны будем использовать пользовательское промежуточное ПО, как говорится в сообщении об ошибке.

Так как же работает промежуточное ПО, такое как Redux-Thunk?

Redux Thunk по сути смягчает правила вокруг создателя действий.

Цель Redux-Thunk не в том, чтобы передать объект запроса, и он заберет его и пойдет работать на вас.

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

Если задействован Redux Thunk, создатель вашего действия может вернуть объект действия. Если вы возвращаете объект действия, он все равно должен иметь свойство типа, а если это возвращаемый объект действия, он может также иметь полезную нагрузку.

Другая вещь, которую делает Redux-Thunk, позволяет вам возвращать либо объект действия, либо функцию.

Если вы вернете функцию, Redux-Thunk автоматически вызовет эту функцию для вас.

Вот и все, что делает Redux-Thunk. Однако, одна вещь, которую Redux-Thunk действительно хорошо делает, - это ручная отправка действия. Это ключевая часть. С Redux-Thunk мы можем вручную отправлять действие в определенный момент времени в будущем.

Таким образом, мы создаем это новое действие, и оно может быть простым объектом JavaScript или функцией, но когда мы отправляем его вручную внутри Redux-Thunk или внутри функции, оно в основном всегда будет простым объектом.

Таким образом, мы отправим это действие, и оно вернется к отправке, а диспетчер отправит его обратно в Redux-Thunk, а Redux-Thunk спросит, является ли оно действием или объектом.

Когда объект Redux-Thunk перенаправляет его автоматически на все редукторы.

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

Где я получаюdispatch а такжеgetState? Из исходного кода библиотеки Redux-Thunk:https://github.com/reduxjs/redux-thunk/blob/master/src/index.js

src/index.js:

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

Если вы посмотрите на условное условие if, вы увидите тело действующей логики. Вы только что отправили действие? Если это так, это функция? Если это так, то Redux Thunk собирается вызвать это действие сdispatch а такжеgetState.

Если наше действие не является функцией, Redux-Thunk не заботится об этом, поэтому он переходит к следующему промежуточному программному обеспечению, как указаноreturn next(action);иначе на редукторах, если нет промежуточного программного обеспечения для запуска.

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