j-snow
@j-snow
Java junior developer

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

Привет всем!
Хочу узнать какие есть варианты добавления сайд-эффектов при использовании хука "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, без дополнительных библотек.
  • Вопрос задан
  • 67 просмотров
Пригласить эксперта
Ответы на вопрос 2
@Che603000
c 2011 javascript
Логика примерно такая
- отправляем на сервер задачу
- ответ в 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>;
}
Ответ написан
DarthJS
@DarthJS
useReducer это все лишь "Альтернатива для useState." Взято из доков.

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

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы