Как добавлять side effects при работе с «useReducer»?

Question

[J. Snow]

Привет всем!
Хочу узнать какие есть варианты добавления сайд-эффектов при использовании хука "useReducer".
Например, есть TODO-приложение, которое при создании задачи должно отправлять её на сервер.

Пример кода без сохранения на сервер

const initialState = {items: []};

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD':
      return {
        ...state,
        items: [...state.items, action.newItem]
      };
      
    default:
      throw new Error();
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);
  
  return (
    <button onClick={() => dispatch({ type: 'ADD', newItem: 123 })}>
      {state.items.length}
    </button>
  );
}

Вопрос: куда добавить отправку запроса на сервер?
(помним, что reducer должен быть чистым)

PS: В первую очередь интересуют варианты решения стандартными средствами React, без дополнительных библотек.

Answer 1

[Александр Черемхин]

Логика примерно такая
- отправляем на сервер задачу
- ответ в reduce
- state изменится и произойдет render

Псевдокод ниже

const initialState = {items: []};

const reducer = (state, action) => {
  switch (action.type) {
    case 'ADD':
      return {
        ...state,
        items: [...state.items, action.newItem]
      };
      
    default:
      throw new Error();
  }
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  const onAdd = e => {
    window.fetch(url, {method: 'post', body:  {name: 'new task'} }) //  отправляем новую задачу на сервер
      .then(data => dispatch({ type: 'ADD', newItem: data})    // data = {id:9, name: 'new task'}  ответ сервера в reduce
      .catch(err => dispatch({ type: 'ERR',  err}) // как то ошибку обработать
  }
  return   <button onClick={onAdd}> {state.items.length} </button>;
}

Comments

[J. Snow]

Александр Черемхин Да, наверное это самый хороший вариант. Спасибо.

Answer 2

[DarthJS]

useReducer это все лишь "Альтернатива для useState." Взято из доков.

useEffect - Принимает функцию, которая содержит императивный код, возможно, с эффектами. То, что вы ищите.

Не бойтесь документации, достаточно бегло прочитать.
https://ru.reactjs.org/docs/hooks-reference.html

Comments

[J. Snow]

DarthJS Хм. Ну и как использовать useEffect в данном случае? Можно подробнее?

PS: Постоянно обращаюсь к докам и использую useEffect в работе. Знаю что это такое. Но как красиво применить её в данном случае пока не придумал.