Skip to content

redux.md

Latest commit

 

History

History
89 lines (71 loc) · 4.68 KB

redux.md

File metadata and controls

89 lines (71 loc) · 4.68 KB

Redux

Глобальное состояние, управляемое через redux разделяется на модули в папке store. В каждом модуле определяются действия, коды действий (actions.js) и редьюсер (reducer.js), реагирующий на результаты действий по их кодам.

Reducer

Для описания редьюсера используется вспомагательная функция utils.reducer(), позволяющая описать обработчики в виде функций вместо применения switch. Имя функции соответствует коду действия.

export default reducer(initState, {

 [types.LOADT_SUCCESS]: (state, action) => {
   return {
     ...state,
     loading: false,
     list: action.payload.list
   };
 },
})

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

Actions

Для реализации действий (actions) используется middleware redux-thunk. Позволяет писать асинхронные действия (возвращать Promise) и делать дополнительные dispatch в редьюсер.

export const types = {
 LOAD: Symbol('LOAD'),
 LOAD_SUCCESS: Symbol('LOAD_SUCCESS'),
 LOAD_FAILURE: Symbol('LOAD_FAILURE'),
};

export default {

 load: ({filter, limit, offset}) => {
   return async dispatch => {
     dispatch({type: types.LOAD});

     try {
       const response = await content.getList({filter, limit, offset});
       const {result} = response.data;
       dispatch({type: types.LOAD_SUCCESS, payload: result});
       return result;
     } catch (e) {
       if (e.response && e.response.status < 500) {
         dispatch({type: types.LOAD_FAILURE, error: e.response.data.error});
       } else {
         throw e;
       }
     }
   };
 },
}

Типовое именование методов действий (@todo):

  • getOne, loadOne - выбор одного объекта
  • getList, load, search?? - выбор списка
  • set - Обновление state (например у форм)
  • send, save, update, create, put, post?? - Сохранение на сервере

Types

Типы действий описываются свойствами объекта и экспортируются в файле с действиями. Они непосредственно используются в действиях модуля и импортируются в любом редьюсере.

Коды действий должны быть уникальный в рамках всего проекта. Для гарантированной уникальности кода используются Symbol. Впрочем, допустимо использование строковых констант в формате 'MODULE_NAME/ACTION' (оправдание в понятности логов). Другой вариант, чтобы сохранить краткость как с Symbol и понятность логов - реализовать вспомогательную функцию, которая бы добавляла к строковой константе префикс с названием модуля. С другими подходами надо учесть работоспособность автодополнения в IDE, чтобы после написания types. появились варианты кодов.

API

Методы API описываются в отдельных файлах и прямого отношения к redux не имеют. Реализуют запросы к серверу АПИ и, возможно, трансформацию ответов. В методах апи используется объект http - экземпляр axios с предустановками. Экземпляр http определен в utils/http.js. В зависимости от алгоритма управления сессией реализуется подписка http на изменения в store.account, в частности на изменение токена, чтобы прописать токен в заголовках для всех запросов.