react-redux-mvc
Implementation of MVC pattrern based on React-Redux bunch keeping one direction data flow (flux pattern)
index.ts (entry point of application)
;;;;;;; /** in place of this helper can be superagent.js for example, or other asynс function. It is used by middleware to* support async actions functionality* */ { return { ; };} const appStore = { return reduxCreateStore {};}; ReactDOM;
ProfileForm.js (View)
;;;; @ { const STORE_KEY: userData userData: firstName lastName age department phone email isSaved } = thisprops; const isSubmitWaiting = thiscontroller; return <div> isSaved && <h1>Data saved!</h1> <form onSubmit= thiscontroller> <input type="text" value=firstName onChange= thiscontroller placeholder="First name"/><br/> <input type="text" value=lastName onChange= thiscontroller placeholder="Last name"/><br/> <input type="text" value=age onChange= thiscontroller placeholder="Age"/><br/> <input type="text" value=email onChange= thiscontroller placeholder="Email"/><br/> <input type="text" value=phone onChange= thiscontroller placeholder="Phone"/><br/> <input type="text" value=department onChange= thiscontroller placeholder="Department"/><br/> <input type="submit" value=isSubmitWaiting ? 'Saving...' : 'Save' disabled=isSubmitWaiting/> </form> </div> ; }}
ProfileController.js
;;;;; static storeKey = STORE_KEY; static actions = actions; static propTypes = UserModelshape; static connectedState = STORE_KEY; { superUserModel; } { this; }; { thisactionACTION_UPDATE_PROFILE prop: value; }; { e; thisactionASYNC_ACTION_SUBMIT_PROFILE userData; }; { this };
UserModel.js
;;; const number string bool = PropTypes; static shape = userData: PropTypesshape firstName: string lastName: string age: number phone: string email: stringisRequired department: string errorMsg: string isSaved: bool ; static defaults = userData: firstName: '' lastName: '' age: null department: '' email: '' phone: '' errorMsg: null isSaved: false ; { superstate; } { return this; } { return this ; } { return this ; } { return this ; }
actions.js
;;; const initialState = Object; ASYNC_ACTION_SUBMIT_PROFILE: ACTION_UPDATE_PROFILE: ;
Installation
npm i react-redux-mvc -S
Example
Для того, чтобы посмотреть рабочий пример, нужно собрать его командой npm run example
из корневой директории проекта, затем открыть файл ./example/index.html
Пример работает локально, без веб-сервера