Соглашение об именах событий в сокращении js
Redux будет отправлять действия для изменения состояния. Что такое соглашения об именах типов действий в redux?
Ответы
Ответ 1
В сообществе существует несколько конвенций, я перечислю те, о которых я знаю, и думаю, что они полезны здесь:
-
Наиболее распространенным соглашением является сохранить типы действий ( "типы событий" ) в CONSTANT_CASE
.
Это позволяет избежать ошибок орфографии, когда действие имеет тип my_type
, но редуктор ожидает тип my-type
или my_type
.
-
Другое очень распространенное соглашение - сохранить типы действий в отдельном файле как константы, например. var MY_ACTION_TYPE = 'MY_ACTION_TYPE';
, и использовать их оттуда.
Это также позволяет избежать ошибок орфографии, поэтому вы не ожидаете, что действие будет иметь тип MY_ACTION_TYP
. Если переменная не существует, вы сразу же получите сообщение об ошибке, особенно, если вы перебираете.
-
Не совсем то же самое, но imho очень полезно, соглашение - это область действия для проекта и домена. Этот подход был популяризирован Эриком Расмуссеном в своем предложении "Утки" , в котором указывается, что типы действий должны быть в этой форме: var MY_ACTION_TYPE = 'appname/domain/MY_ACTIONTYPE'
.
Это позволяет избежать случая двух констант действия, имеющих одинаковое значение. Например. представьте, что у вас есть область администратора и область, обращенная к пользователю, и у обоих есть формы, отправляющие тип действия 'CHANGE_USERNAME'
. Это приведет к тому, что два редуктора заберут одно и то же действие, где не следует выбирать другого. Это может произойти в случае аварии, и очень раздражает отслеживать. Префикс их с именем приложения и домена позволяет избежать этой проблемы: 'appname/admin/CHANGE_USERNAME'
отличается от 'appname/user/CHANGE_USERNAME'
!
Что все конвенции, которые я знаю и использую, но я уверен, что у кого-то еще больше - что вы использовали и нашли полезным в своих проектах?
Ответ 2
Существуют также некоторые соглашения об именах асинхронных типов действий. Если у вас есть набор действий для представления вызова api для получения пользователя, вы можете разбить их на что-то вроде:
-
FETCH_USER_REQUEST
- когда вы сначала отправляете вызов api
-
FETCH_USER_SUCCESS
- когда выполняется api-вызов и успешно возвращаются данные
-
FETCH_USER_FAIL
- если ошибка api не удалась и ответила с ошибкой,
-
FETCH_USER_COMPLETE
- иногда используется в конце вызова независимо от состояния
Ответ 3
Существует новый шаблон, который обращается к этому, redux-auto.
Взятие идей композиции редуктора еще на один шаг. Где вместо файла, представляющего ваш редуктор, и создания отдельных действий.
redux-auto подходит для того, чтобы иметь папки с отдельными JS файлами, представляющие каждое действие/преобразование в состоянии и динамически отображая это как функции
Пример
└── store/
├──user/
│ └── index.js
│ └── changeName.js
└──posts/
└── index.js
└── delete.js
Теперь из любого приложения в вашем приложении вы можете написать
import actions from 'redux-auto'
...
actions.user.changeName({name:"bob"})
магазин/пользователь/changeName.js
export default function (user, payload) {
return Object.assign({},user,{ name : payload.name });
}
Вот!!
Если вы хотите прослушать действия redux в сторонних редукторах. Вы можете использовать как функцию контроля качества для функции.
action.type == actions.user.changeName // "USER/CHANGENAME"
Для чего-то более продвинутого вы даже можете увидеть, принадлежит ли действие конкретному редуктору
// Returns true if it an action specifically for user
if(action.type in actions.user)
Более подробную информацию можно найти на странице