Я научился реагировать и 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, например), поэтому мне нужно найти место для них.
Мой вопрос - есть ли причина для рефакторинга? это на крючок с использованием локального государства?