Почему dispatch надо использовать 2 раза?

Question

[justifycontent]

Компонента App.js

const App = () => {
  const dispatch = useDispatch();

  React.useEffect(() => {
// Вот тут я диспатчу fetchPizzas, но зачем? Если fetchPizzas это делает внутри себя.
    dispatch(fetchPizzas())
  }, [])


  return (
    <div className="wrapper">
      <Header />  {/*--------H E A D E R-------*/}
      <div className="content">
        <Route exact path='/' component={Home} /> {/*--------H O M E-------*/}
        <Route exact path='/cart' component={Cart} /> {/*--------C A R T-------*/}
      </div>
    </div>
  )
}

export default App;

actions:

import axios from 'axios'

const fetchPizzas = () => (dispatch) => {
  axios.get('http://localhost:3003/pizzas').then(({ data }) => {
    dispatch(setPizzas(data))
  })
}

const setPizzas = items => ({
  type: 'SET_PIZZAS',
  payload: items,
});

export default fetchPizzas

Почему недостаточно просто вызвать fetchPizzas()? Выполняю этот запрос с использованием redux-thunk

Answer 1

[Алексей Уколов]

У вас два action:

1. Запусти запрос
   
2. Сохрани результат
   

Поэтому и dispatch два.

Comments

[justifycontent]

Спасибо, Алексей, я предполагал этот вариант, но сомневался, поэтому решил узнать тут

[Алексей Уколов]

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

[justifycontent]

Алексей Уколов, Что вы имеете в виду под "Индикатором загрузки"?

[Алексей Уколов]

Картинку крутящуюся.

Answer 2

[xirurgx3d]

redux-thunk - это мидлвара, которая подразумевает собой промежуточный слой между вашим action и reduser,
в которой вы можете на одну реакцию экшина, повесить сколько угодно диспачеров
fetchPizzas - является функцией частичного применения, куда вы можете передать нужны вам параметры, а redux-thunk, уже во вложенную функцию передает вам dispatch, что бы вы могли в ну три своей функции, могли вызывать другие экшины через dispatch