Как обрабатывать побочные эффекты при переходе с Redux на React Context API + hooks

Question

Если у вас есть приложение Redux, которое вы хотите перенести на новый React Context API + hooks (useReducer), как бы вы заменили redux-saga или redux-thunk для обработки побочных эффектов? Давайте возьмем пример со страницы gitHub-саги:

import { call, put, takeEvery, takeLatest } from 'redux-saga/effects'
import Api from '...'

function* fetchUser(action) {
   try {
      const user = yield call(Api.fetchUser, action.payload.userId);
      yield put({type: "USER_FETCH_SUCCEEDED", user: user});
   } catch (e) {
      yield put({type: "USER_FETCH_FAILED", message: e.message});
   }
}

function* mySaga() {
  yield takeEvery("USER_FETCH_REQUESTED", fetchUser);
}

function* mySaga() {
  yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
}

export default mySaga;

Какова рекомендуемая лучшая практика для выполнения эквивалента без Redux, но с использованием вместо него хитов api + React Context?

Answer 1

Взгляните на useEffect крючок. Это то, что вы используете для побочных эффектов.

https://reactjs.org/docs/hooks-effect.html

Вот пример того, как вызвать API из вашего компонента и отобразить данные:

import ReactDOM from "react-dom";
import React, { useState, useEffect } from "react";
import axios from "axios";

function SearchResults() {
  const [data, setData] = useState(null);
  useEffect(() => {
    function getFetchUrl() {
      return "https://hn.algolia.com/api/v1/search?query=react";
    }
    async function fetchData() {
      console.log("asdasd");
      const result = await axios(getFetchUrl());
      setData(result.data);
    }

    fetchData();
  }, []);
  return <div>{JSON.stringify(data)}</div>;
}

ReactDOM.render(<SearchResults />, document.getElementById("root"));

Я частично взял этот код из overreacted.io, я настоятельно рекомендую вам прочитать эту удивительную статью о useEffect hook: https://overreacted.io/a-complete-guide-to-useeffect/

Относительно useReducer, это в основном useState на стероидах. Он позволяет вам выполнять более сложные операции с состоянием, но на самом деле большой разницы нет.

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

---- о редуксе:

Я просто хочу также прокомментировать, что переход на использование Api + хуков React Context для замены избыточности в вашем приложении может быть полезен, если вы просто используете его для передачи данных, например, во вложенные компоненты. Но если вам нужны все великолепные инструменты, промежуточное ПО, devtools и т. Д., Redux по-прежнему отличный выбор, даже с хуками, они не являются взаимоисключающими.

См:

https://blog.isquaredsoftware.com/2019/03/presentation-state-of-redux/ конкретно https://blog.isquaredsoftware.com/presentations/2019-03-state-of-redux/#/10 https://blog.isquaredsoftware.com/presentations/2019-03-state-of-redux/#/11

Answer 2

Если у вас есть приложение Redux, которое вы хотите перенести на новый React Context API, вы должны иметь возможность получать данные для любого компонента в вашей иерархии, вам нужно иметь возможность отделить логику представления от вашейбизнес-логика, и вы должны иметь возможность разделить бизнес-логику, то есть модульность, то есть не иметь 1000 LOC в одном файле.

Если у вас нет другого выбора, я бы остановился на Redux.С Redux вы получаете отличную документацию, документы довольно хорошо написаны, и вы можете в целом понять, что происходит.Шаблоны проектирования хорошо известны, и их достаточно, а библиотеки с открытым исходным кодом специально созданы для работы с Redux.

С Context вам не нужно использовать отдельную библиотеку, вот и все.Это единственное преимущество использования Context вместо Redux.У контекста есть свои проблемы из-за сквозных проблем при создании магазина.