Отправка с повторным ударом

#javascript #react-redux #redux-thunk

Вопрос:

В настоящее время я изучаю redux-thunk и встретил странный синтаксис использования функции, возвращающей функцию.

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

  useEffect(() => {
    dispatch(anecdoteService.initializeAnecdotes())
  }, [dispatch])
 

который также может быть переписан как

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

  useEffect(() => {
    anecdoteService.initializeAnecdotes()(dispatch)
  }, [dispatch])
 

Определение initializeAnecdotes-это

 const initializeAnecdotes = () => {
  return async dispatch => {
    const anecdotes = await getAll()
    dispatch({
      type: 'INIT_ANECDOTES',
      data: anecdotes,
    })
  }
} 
 

Оба они работают (по крайней мере, для меня), и мой вопрос в том, как работает первая версия?

Комментарии:

1. в чем причина размещения [dispatch] массива зависимостей?

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

3. Вы можете использовать useSelector для загрузки данных. useEffect с store.dispatch зависимостью не совсем правильный подход. На самом деле в useEffect мы должны наблюдать объекты уровня компонента, если вы наблюдаете внешние объекты, то ваш компонент будет перезагружаться всякий раз, когда внешний объект изменяется.

4. «мой вопрос в том, как работает первая версия?» redux-thunk позволяет отправлять функции, которые будут вызываться: github.com/reduxjs/redux-thunk/blob/… . Если бы вы не использовали redux-thunk, вы бы получили сообщение об ошибке.

5. Спасибо. Я думал, что это новая функция, поэтому я был совершенно сбит с толку

Ответ №1:

redux-thunk позволяет отправлять функции, которые будут вызываться: https://github.com/reduxjs/redux-thunk/blob/master/src/index.js Если бы вы не использовали redux-thunk, вы бы получили сообщение об ошибке.