easy-redux
Helpers to facilitate the work with redux
License
See the LICENSE file for license rights and limitations (MIT).
Основное предназначение - уход от размывания кода на actions, constants, types. Компонента становится независимой, инкапсулирует в себе все данные и методы которые нужны для работы.
Установка:
npm i easy-redux -S
В данном случае структура компоненты внутри приложения принимет следующий вид:
/components
/MyComponent
actions.js
component.js
index.js
//index.js;const bool string array = PropTypes;const dataShape = isWaiting: bool isFailed: bool status: stringisRequired likes: arrayisRequired;const STORE_KEY = 'likes';;
//actions.js;;const ACTION_RESET = 'increment';const ACTION_REMOTE_LIKES = 'remote_like'; const initialState = isWaiting: false isFailed: false status: 'expired' likes: ; const actions = ; const loadLikes = actionsACTION_REMOTE_LIKES;const reset = actionsACTION_RESET;
//component.js;;; ; @ static propTypes = STORE_KEY: PropTypesshapedataShape //actions loadLikes: PropTypesfuncisRequired reset: PropTypesfuncisRequired ; { thisprops; }; { thisprops; }; { const STORE_KEY: status isWaiting = thisprops; return <div> <p>status</p> <button onClick=thisonUpdateClick className=isWaiting ? 'waiting' : ''>Update</button> <button onClick=thisonResetClick>Reset</button> </div> ; }
Соответственно при импорте компоненты в глобальном сторе появится поле likes
(STORE_KEY
), подключится reducer
и actions