Redux против пользовательского хука - PullRequest
0 голосов
/ 08 ноября 2019

Я научился реагировать и Redux одновременно и пошел ва-банк на Redux;в основном все состояние хранится в Redux . И я следовал стандартному allIds, byId шаблону формы состояния , как подробно описано здесь .

Мое приложение ориентировано на данные, оно взаимодействует с API и выполняет множество действий типа CRUD - fetchAll, fetchById, add, update, delete.

Связь API разделена на модуль "уровня обслуживания", который является его собственным пакетом npm. Все вызовы этого сервисного уровня выполняются в действиях Redux с использованием redux-thunk .

Я понял, что нет необходимости помещать все в Redux, данные действительно нужны наконкретный компонент, например. И я хотел бы упростить эту архитектуру.

Поэтому вместо этого я начал рефакторинг в пользовательский хук. Казалось, поскольку моя форма состояния была скорее объектом, а не скалярным, я должен использовать useReducer, а не useState ...

// reducer
// ------------------------- 
const initialState = {
  adding: false,
  updating: false,
  deleting: false,
  error: null,
  items: null
};
const reducer = (state, action) => {
// implementation omitted for brevity. . .
}
const useItemsApi = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  // wrapped in useCallback because called in component's useEffect
  const fetchItems = useCallback(async (options) => {
    try {
      const resp = apiService.fetchItems(options);
    } catch (err) {
      if(err.status === 401) 
         // send to login screen
      else
         dispatch({type: 'error', payload: err});
    }
  }, [options]);

  // addItem, updateItem, deleteItem, etc...

  const actions = {fetchItems, updateItem, addItem, deleteItem};
  return [state, actions];
};

// component
// ------------------------- 
const component = (props) => {
  const [state, actions] = useItemsApi();
  const {fetchItems, updateItem, addItem, deleteItem} = actions;
  useEffect(() => {
     fetchItems()
  }, fetchItems);

  // omitted for brevity...
}

Когда мне нужно установить состояние в редукторе дляобновив действие, я понял, что было бы проще, если бы я использовал шаблоны "allIds" и "byId".

И в этот момент я подумал - чем это отличается от использования Redux?

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

Мой вопрос - есть ли причина для рефакторинга? это на крючок с использованием локального государства?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...