├── .babelrc
├── .editorconfig
├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── example
    ├── ExampleApp.js
    ├── bootstrap.js
    ├── index.html
    ├── notepad
    │   ├── NotepadActions.js
    │   ├── NotepadContainer.js
    │   ├── NotepadController.js
    │   ├── NotepadReducers.js
    │   └── components
    │   │   └── Notepad.js
    └── todo
    │   ├── TodoActions.js
    │   ├── TodoContainer.js
    │   ├── TodoController.js
    │   ├── TodoReducers.js
    │   └── components
    │       ├── TodoItem.js
    │       └── TodoList.js
├── package.json
├── src
    ├── App.js
    ├── Container.js
    ├── Controller.js
    ├── Store.js
    ├── View.js
    └── index.js
├── webpack.config.dev.js
└── webpack.config.prod.js


/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": ["es2015", "react"],
3 |   "plugins": ["transform-object-assign"]
4 | }


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | # EditorConfig helps developers define and maintain
 2 | # consistent coding styles between different editors and IDEs.
 3 | root = true
 4 | [*]
 5 | charset = utf-8
 6 | indent_style = space
 7 | indent_size = 4
 8 | end_of_line = lf
 9 | insert_final_newline = true
10 | trim_trailing_whitespace = true
11 | [*.md]
12 | insert_final_newline = false
13 | trim_trailing_whitespace = false


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | .DS_Store
3 | node_modules/
4 | npm-debug.log
5 | todo.txt
6 | dist
7 | es5


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | todo.txt


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Hristiyan Nikolov
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # react-redux-oop
  2 | 
  3 | OOP implementation of redux and react.
  4 | 
  5 | **Moving to 2.0.x, docs will change soon.**
  6 | 
  7 | ## Motivation
  8 | 
  9 | Functional programming is very popular right now among web and mobile frontend developers. It's a cool way of doing things but in my opinion it's never black and white. It's a good paradigm and developers can learn a hell lot out of it but I personally don't like they apps are being organized. I just like many developers don't like plain functions in hundreds lowercase files. I like the class structure, because it eases reading and understanding the code a lot. I believe this implementation of redux and react can be helpful for bigger applications.
 10 | 
 11 | ## Installation
 12 | 
 13 | `npm install --save react-redux-oop`
 14 | 
 15 | The UMD build is in the dist directory.
 16 | 
 17 | ## Description
 18 | 
 19 | This is just an implementation of react and redux. It uses plain `react`, `redux` and `react-redux`.  No functionality is changed or added to these libraries. It's only a way to organize your app with a bunch of helpful classes. Also it solves the problem with multiple stores and binded action creators.
 20 | 
 21 | #### Store
 22 | 
 23 | This is a wrapper of the redux store. It's purpose is to be able to easily enable and disable reducers without too much function composition. Also **splits reducers by actions and store path**, instead of just store path. The store requires the usage of [seamless-immutable](https://github.com/rtfeldman/seamless-immutable). It will automatically force it onto your state objects. It also extends [eventemitter3](https://github.com/primus/eventemitter3).
 24 | 
 25 | ```typescript
 26 | class Store extends EventEmitter {
 27 |     constructor(state: Object, enhancer: function) {}
 28 |     
 29 |     addReducer(action: string, path: string, reducer: function) {}
 30 |     removeReducer(action: string, path: string, reducer: function) {}
 31 |     addReducers(reducers: Object) {}
 32 |     removeReducers(reducers: Object) {}
 33 |     
 34 |     get state(): Object {}
 35 |     get reduxStore(): Object {}
 36 | }
 37 | ```
 38 | 
 39 | ##### Reducers
 40 | 
 41 | Reducers in the Store are added either as a single reducer or as an object of this format:
 42 | 
 43 | ```javascript
 44 | store.addReducers({
 45 |     'ADD_ITEM': {
 46 |         'todo': [
 47 |             (state = {lastId: 0, items: {}}, action) => {
 48 |                 // Do the job
 49 |             },
 50 |             (state = {lastId: 0, items: {}}, action) => {
 51 |                 // Another reducer for the same action and state.
 52 |             }
 53 |         ]
 54 |     },
 55 | 
 56 |     'REMOVE_ITEM': {
 57 |         'todo.items': [
 58 |             (state = {}, action) => {
 59 |                 // Do the job
 60 |             }
 61 |         ]
 62 |     },
 63 | 
 64 |     // or you can use wildcards '*' meaning all actions or the full state:
 65 |     '*': {
 66 |         '*': [
 67 |             (state = {}, action) => {
 68 |                 // Do the job
 69 |             }
 70 |         ]
 71 |     }
 72 | });
 73 | ```
 74 | 
 75 | #### Controller
 76 | 
 77 | This "abstract" class is used to remove the need of action creators. **It combines dispatching with creating the action**. Every controller is provided with the store's dispatch. It also works on the server, because you can create multiple controllers with different stores. Action creators cannot be binded to the dispatch, because the store changes on the server and they are just functions, but controllers can, because they have context.
 78 | 
 79 | ```typescript
 80 | class Controller {
 81 |     constructor(store: Object|Store) {}
 82 |     
 83 |     attachTo(store: Object|Store) {}
 84 |     
 85 |     dispatch(type: string, data: Object = {}) {}
 86 |     getState(): Object {}
 87 |     
 88 |     get state(): Object {}
 89 | }
 90 | ```
 91 | 
 92 | #### Container
 93 | 
 94 | This is an "abstract" extension to the React.Component class. It uses react-redux to connect to the store but used a different syntax and flow to utilize the dispatch method. Every Container component can set an `actions` object of Controllers which are automatically provided with the store from react-redux'es Provider. **Containers are always treated as pure**.
 95 | 
 96 | ```typescript
 97 | class Container extends React.Component {
 98 |     static connect() {}
 99 |     constructor(props: Object) {}
100 |     dispatch(type: string, data: Object) {}
101 | }
102 | ```
103 | 
104 | #### App
105 | 
106 | ```typescript
107 | class App {
108 |     constructor(state: Object = {}, middlewares: Array.<function> = [], enhancers: Array.<function> = []) {}
109 |     
110 |     configure(state: Object = {}) {}
111 |     renderTo(node: HTMLElement) {}
112 |     renderHtml() {}
113 |     renderStaticHtml() {}
114 |     
115 |     _addMiddleware(middleware, index = null) {}
116 |     _addEnhancer(enhancer: function, index: number = null) {}
117 |     _createStore(state:Object = {}) {}
118 |     _render() {}
119 |     
120 |     get store(): Store {}
121 | }
122 | ```
123 | 
124 | An "abstract" facade class for your application. It's supposed to be extended with custom functionality. It only has a **bootstrapping function** and **may not be used at all** if you don't like it.
125 | 
126 | 
127 | ## Example
128 | 
129 | There is a todo example in the example directory. It shows the full usage. Here is the basic idea:
130 | 
131 | ```javascript
132 | class TodoController extends Controller {
133 |     addTodo(text) {
134 |         this.dispatch('ADD_TODO', {text});
135 |     }
136 |     
137 |     removeTodo() {
138 |         this.dispatch('ADD_TODO', {text});
139 |     }
140 |     
141 |     asyncAction() {
142 |         this.dispatch('ASYNC_START');
143 |         setTimeout(() => this.dispatch('ASYNC_COMPLETE'), 1000);
144 |     }
145 | }
146 | 
147 | const TodoReducers = {
148 |     'ADD_TODO': {
149 |         'todo': [
150 |             (state = {lastId: 0, items: {}}, action) => {
151 |                 let newId = state.lastId + 1;
152 | 
153 |                 return {
154 |                     lastId: newId,
155 |                     items: state.items.merge({
156 |                         [newId]: {text: action.text, checked: false}
157 |                     })
158 |                 }
159 |             }
160 |         ]
161 |     },
162 | 
163 |     'REMOVE_TODO': {
164 |         'todo.items': [
165 |             (state = {}, action) => state.without(action.id)
166 |         ]
167 |     }
168 | }
169 | 
170 | class TodoContainer extends Container {
171 |     // This is mapStateToProps from react-redux
172 |     static mapper(state) {
173 |         return {
174 |             items: state.todo.items
175 |         };
176 |     }
177 | 
178 |     // Actions can be defined this way:
179 |     actions = {
180 |         todo: new TodoController(),
181 |         another: new AnotherController();
182 |     }
183 |     
184 |     // or this way:
185 |     actions = new TodoController();
186 | 
187 |     render() {
188 |         return (
189 |             <TodoList
190 |                 items={this.props.items}
191 |                 onAdd={text => this.actions.addTodo(text)}
192 |                 onRemove={id => this.actions.removeTodo(id)}
193 |             />
194 |         );
195 |     }
196 | }
197 | 
198 | TodoContainer = TodoContainer.connect();
199 | 
200 | 
201 | class ExampleApp extends App {
202 |     constructor() {
203 |         super({
204 |             todo: {
205 |                 lastId: 0,
206 |                 items: {}
207 |             }
208 |         });
209 | 
210 |         if (process.env.NODE_ENV !== 'production') {
211 |             this._addMiddleware(require('redux-logger')());
212 | 
213 |             let matches = window.location.href.match(/[?&]_debug=([^&]+)\b/);
214 |             let session = (matches && matches.length) ? matches[1] : null;
215 | 
216 |             let devTools = null;
217 |             if (window['devToolsExtension']) devTools = window['devToolsExtension']();
218 | 
219 |             if (devTools) this._addEnhancer(devTools);
220 |         }
221 |     }
222 | 
223 |     _render() {
224 |         return (
225 |             <div>
226 |                 <TodoContainer />
227 |             </div>
228 |         );
229 |     };
230 | 
231 |     _createStore() {
232 |         let store = super._createStore();
233 |         store.addReducers(TodoReducers);
234 |         return store;
235 |     }
236 | }
237 | 
238 | 
239 | // Create an app and append it to the DOM
240 | 
241 | const app = new ExampleApp();
242 | 
243 | app
244 |   .configure({/* Change initial state, maybe from server or something. */})
245 |   .renderTo(document.getElementById('app'));
246 | 
247 | // We can just create a controller and execute new actions.
248 | 
249 | let controller = new TodoController(app.store);
250 | controller.addItem('Have something to eat.');
251 | controller.addItem('Have something to drink.');
252 | controller.addItem('Sleep.');
253 | ```
254 | 


--------------------------------------------------------------------------------
/example/ExampleApp.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const React = require('react');
 4 | const App = require('../src/App');
 5 | const TodoContainer = require('./todo/TodoContainer');
 6 | const NotepadContainer = require('./notepad/NotepadContainer');
 7 | 
 8 | const TodoReducers = require('./todo/TodoReducers');
 9 | const NotepadReducers = require('./notepad/NotepadReducers');
10 | 
11 | 
12 | class ExampleApp extends App {
13 |     constructor() {
14 |         super({
15 |             notepad: {
16 |                 text: ''
17 |             },
18 | 
19 |             todo: {
20 |                 lastId: 0,
21 |                 items: {}
22 |             }
23 |         });
24 | 
25 |         let dev = (process.env.NODE_ENV !== 'production');
26 | 
27 |         if (dev) this._addMiddleware(require('redux-immutable-state-invariant')());
28 | 
29 |         this._addMiddleware(require('redux-thunk').default);
30 | 
31 |         if (dev) {
32 |             this._addMiddleware(require('redux-logger')());
33 | 
34 |             let matches = window.location.href.match(/[?&]_debug=([^&]+)\b/);
35 |             let session = (matches && matches.length) ? matches[1] : null;
36 | 
37 |             let devTools = null;
38 |             if (window['devToolsExtension']) devTools = window['devToolsExtension']();
39 | 
40 |             if (devTools) this._addEnhancer(devTools);
41 |             if (session) this._addEnhancer(require('redux-devtools').persistState(session));
42 |         }
43 |     }
44 | 
45 |     /**
46 |      * @private
47 |      */
48 |     _render() {
49 |         return (
50 |             <div>
51 |                 {<TodoContainer />}
52 |                 {<NotepadContainer />}
53 |             </div>
54 |         );
55 |     };
56 | 
57 |     /**
58 |      * @returns {Store}
59 |      * @private
60 |      */
61 |     _createStore() {
62 |         let store = super._createStore();
63 |         store.addReducers(TodoReducers);
64 |         store.addReducers(NotepadReducers);
65 |         return store;
66 |     }
67 | }
68 | 
69 | 
70 | module.exports = ExampleApp;
71 | 


--------------------------------------------------------------------------------
/example/bootstrap.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | // Create an app and append it to the DOM
 4 | 
 5 | const ExampleApp = require('./ExampleApp');
 6 | const app = new ExampleApp();
 7 | 
 8 | app.configure().renderTo(document.getElementById('app'));
 9 | 
10 | 
11 | // We can just create a controller and execute new actions.
12 | 
13 | const TodoController = require('./todo/TodoController');
14 | let controller = new TodoController(app.store);
15 | controller.addItem('Have something to eat.');
16 | controller.addItem('Have something to drink.');
17 | controller.addItem('Sleep.');
18 | 


--------------------------------------------------------------------------------
/example/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |         <meta charset="utf-8">
 5 |         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6 |         <title>Redux + React OOP example</title>
 7 |     </head>
 8 |     <body>
 9 |         <div id="app"></div>
10 |         <script src="/vendor.bundle.js"></script>
11 |         <script src="/app.js"></script>
12 |     </body>
13 | </html>


--------------------------------------------------------------------------------
/example/notepad/NotepadActions.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | 
3 | const NotepadActions = {
4 |     CHANGE_TEXT: 'CHANGE_TEXT'
5 | };
6 | 
7 | module.exports = NotepadActions;


--------------------------------------------------------------------------------
/example/notepad/NotepadContainer.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const React = require('react');
 4 | const Container = require('../../src/Container');
 5 | const NotepadController = require('./NotepadController');
 6 | const Notepad = require('./components/Notepad');
 7 | 
 8 | class NotepadContainer extends Container {
 9 |     /**
10 |      * Map state to props
11 |      * @param {Object} state
12 |      * @returns {Object}
13 |      */
14 |     static mapper(state) {
15 |         return {
16 |             text: state.notepad.text
17 |         };
18 |     }
19 | 
20 |     /**
21 |      * Collection of controllers or a single controller.
22 |      * @type {NotepadController|exports|module.exports}
23 |      */
24 |     actions = new NotepadController();
25 | 
26 |     /**
27 |      * Render
28 |      * @returns {XML}
29 |      */
30 |     render() {
31 |         return (
32 |             <Notepad
33 |                 text={this.props.text}
34 |                 onChange={text => this.actions.changeText(text)}
35 |             />
36 |         );
37 |     }
38 | }
39 | 
40 | module.exports = NotepadContainer.connect();


--------------------------------------------------------------------------------
/example/notepad/NotepadController.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const Controller = require('../../src/Controller');
 4 | const Actions = require('./NotepadActions');
 5 | 
 6 | class NotepadController extends Controller {
 7 |     /**
 8 |      * @param {string} text
 9 |      */
10 |     changeText(text) {
11 |         this.dispatch(Actions.CHANGE_TEXT, {text});
12 |     }
13 | }
14 | 
15 | module.exports = NotepadController;


--------------------------------------------------------------------------------
/example/notepad/NotepadReducers.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const Actions = require('./NotepadActions');
 4 | 
 5 | const NotepadReducers = {
 6 |     [Actions.CHANGE_TEXT]: {
 7 |         'notepad.text': [
 8 |             (state = {}, action) => action.text
 9 |         ]
10 |     }
11 | };
12 | 
13 | module.exports = NotepadReducers;


--------------------------------------------------------------------------------
/example/notepad/components/Notepad.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const React = require('react');
 4 | 
 5 | 
 6 | class Notepad extends React.Component {
 7 |     static propTypes = {
 8 |         text: React.PropTypes.string.isRequired,
 9 |         onChange: React.PropTypes.func.isRequired
10 |     };
11 | 
12 |     render() {
13 |         return (
14 |             <div>
15 |                 <textarea value={this.props.text} onChange={event => this.props.onChange(event.target.value)} />
16 |             </div>
17 |         );
18 |     }
19 | }
20 | 
21 | 
22 | module.exports = Notepad;


--------------------------------------------------------------------------------
/example/todo/TodoActions.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const TodoActions = {
 4 |     ADD_ITEM: 'ADD_ITEM',
 5 |     REMOVE_ITEM: 'REMOVE_ITEM',
 6 |     CHECK_ITEM: 'CHECK_ITEM',
 7 |     UNCHECK_ITEM: 'UNCHECK_ITEM'
 8 | };
 9 | 
10 | module.exports = TodoActions;
11 | 


--------------------------------------------------------------------------------
/example/todo/TodoContainer.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const React = require('react');
 4 | const Container = require('../../src/Container');
 5 | const TodoController = require('./TodoController');
 6 | const TodoList = require('./components/TodoList');
 7 | 
 8 | class TodoContainer extends Container {
 9 |     /**
10 |      * Map state to props
11 |      * @param {Object} state
12 |      * @returns {Object}
13 |      */
14 |     static mapper(state) {
15 |         return {
16 |             items: state.todo.items
17 |         };
18 |     }
19 | 
20 |     /**
21 |      * Collection of controllers or a single controller.
22 |      * @type {TodoController|exports|module.exports}
23 |      */
24 |     actions = new TodoController();
25 | 
26 |     /**
27 |      * Render
28 |      * @returns {XML}
29 |      */
30 |     render() {
31 |         return (
32 |             <TodoList
33 |                 items={this.props.items}
34 |                 onAddItem={text => this.actions.addItem(text)}
35 |                 onItemRemove={id => this.actions.removeItem(id)}
36 |                 onItemCheck={id => this.actions.checkItem(id)}
37 |                 onItemUncheck={id => this.actions.uncheckItem(id)}
38 |             />
39 |         );
40 |     }
41 | }
42 | 
43 | // Always export Component.connect();
44 | module.exports = TodoContainer.connect();
45 | 


--------------------------------------------------------------------------------
/example/todo/TodoController.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const Controller = require('../../src/Controller');
 4 | const Actions = require('./TodoActions');
 5 | 
 6 | class TodoController extends Controller {
 7 |     /**
 8 |      * @param {string} text
 9 |      */
10 |     addItem(text) {
11 |         this.dispatch(Actions.ADD_ITEM, {text});
12 |     }
13 | 
14 |     /**
15 |      * @param {number} id
16 |      */
17 |     removeItem(id) {
18 |         this.dispatch(Actions.REMOVE_ITEM, {id});
19 |     }
20 | 
21 |     /**
22 |      * @param {number} id
23 |      */
24 |     checkItem(id) {
25 |         this.dispatch(Actions.CHECK_ITEM, {id});
26 |     }
27 | 
28 |     /**
29 |      * @param {number} id
30 |      */
31 |     uncheckItem(id) {
32 |         this.dispatch(Actions.UNCHECK_ITEM, {id});
33 |     }
34 | }
35 | 
36 | module.exports = TodoController;
37 | 


--------------------------------------------------------------------------------
/example/todo/TodoReducers.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const Actions = require('./TodoActions');
 4 | 
 5 | const TodoReducers = {
 6 |     [Actions.ADD_ITEM]: {
 7 |         'todo': [
 8 |             (state = {lastId: 0, items: {}}, action) => {
 9 |                 let newId = state.lastId + 1;
10 | 
11 |                 return {
12 |                     lastId: newId,
13 |                     items: state.items.merge({
14 |                         [newId]: {text: action.text, checked: false}
15 |                     })
16 |                 }
17 |             }
18 |         ]
19 |     },
20 | 
21 |     [Actions.REMOVE_ITEM]: {
22 |         'todo.items': [
23 |             (state = {}, action) => state.without(action.id)
24 |         ]
25 |     },
26 | 
27 |     [Actions.CHECK_ITEM]: {
28 |         'todo.items': [
29 |             (state = {}, action) => state.setIn([action.id, 'checked'], true)
30 |         ]
31 |     },
32 | 
33 |     [Actions.UNCHECK_ITEM]: {
34 |         'todo.items': [
35 |             (state = {}, action) => state.setIn([action.id, 'checked'], false)
36 |         ]
37 |     }
38 | };
39 | 
40 | module.exports = TodoReducers;
41 | 


--------------------------------------------------------------------------------
/example/todo/components/TodoItem.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const React = require('react');
 4 | 
 5 | class TodoItem extends React.Component {
 6 |     static propTypes = {
 7 |         text: React.PropTypes.string.isRequired,
 8 |         checked: React.PropTypes.bool.isRequired,
 9 |         onRemove: React.PropTypes.func.isRequired,
10 |         onCheck: React.PropTypes.func.isRequired,
11 |         onUncheck: React.PropTypes.func.isRequired
12 |     };
13 | 
14 |     render() {
15 |         return (
16 |             <div>
17 |                 <div style={{textDecoration: this.props.checked ? 'line-through' : ''}} >{this.props.text}</div>
18 | 
19 |                 <button onClick={this.props.onRemove}>Remove</button>
20 |                 <button onClick={this.props.onCheck}>Check</button>
21 |                 <button onClick={this.props.onUncheck}>Uncheck</button>
22 |             </div>
23 |         )
24 |     }
25 | }
26 | 
27 | module.exports = TodoItem;
28 | 


--------------------------------------------------------------------------------
/example/todo/components/TodoList.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const React = require('react');
 4 | const TodoItem = require('./TodoItem');
 5 | 
 6 | class TodoList extends React.Component {
 7 |     static propTypes = {
 8 |         items: React.PropTypes.object.isRequired,
 9 |         onItemRemove: React.PropTypes.func.isRequired,
10 |         onItemCheck: React.PropTypes.func.isRequired,
11 |         onItemUncheck: React.PropTypes.func.isRequired
12 |     };
13 | 
14 |     _handleClick() {
15 |         this.props.onAddItem(this.refs.input.value);
16 |         this.refs.input.value = '';
17 |     }
18 | 
19 |     render() {
20 |         return (
21 |             <div>
22 |                 <div>
23 |                     {Object.keys(this.props.items).map(key => (
24 |                         <TodoItem
25 |                             key={key}
26 | 
27 |                             onRemove={this.props.onItemRemove.bind(null, key)}
28 |                             onCheck={this.props.onItemCheck.bind(null, key)}
29 |                             onUncheck={this.props.onItemUncheck.bind(null, key)}
30 | 
31 |                             {...this.props.items[key]}
32 |                         />
33 |                     ))}
34 |                 </div>
35 | 
36 |                 <input ref="input"/>
37 |                 <button onClick={this._handleClick.bind(this)}>Add item</button>
38 |             </div>
39 |         )
40 |     }
41 | }
42 | 
43 | module.exports = TodoList;
44 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-redux-oop",
 3 |   "description": "An OOP implementation of redux and react.",
 4 |   "version": "2.1.0",
 5 |   "main": "./es5/index.js",
 6 |   "scripts": {
 7 |     "build:es5": "babel src --out-dir es5",
 8 |     "build:umd": "cross-env NODE_ENV=development webpack --config ./webpack.config.prod.js src/index.js dist/react-redux-oop.js",
 9 |     "build:umd:min": "cross-env NODE_ENV=production webpack --config ./webpack.config.prod.js src/index.js dist/react-redux-oop.min.js",
10 |     "build": "npm run clean && npm run build:es5 && npm run build:umd && npm run build:umd:min",
11 |     "clean": "rimraf es5 dist coverage",
12 |     "prepublish": "npm run build",
13 |     "start": "rimraf build && webpack-dev-server --config ./webpack.config.dev.js --hot --inline --progress"
14 |   },
15 |   "repository": {
16 |     "type": "git",
17 |     "url": "https://github.com/newtoncodes/react-redux-oop"
18 |   },
19 |   "license": "MIT",
20 |   "bugs": {
21 |     "url": "https://github.com/newtoncodes/react-redux-oop"
22 |   },
23 |   "author": "Hristiyan Nikolov <hristiyan@newton.codes> (http://github.com/newtoncodes)",
24 |   "homepage": "https://github.com/newtoncodes/react-redux-oop",
25 |   "files": [
26 |     "dist",
27 |     "es5",
28 |     "src"
29 |   ],
30 |   "keywords": [
31 |     "react",
32 |     "reactjs",
33 |     "flux",
34 |     "redux",
35 |     "oop"
36 |   ],
37 |   "dependencies": {
38 |     "eventemitter3": "^1.2.0",
39 |     "seamless-immutable": "^6.1.0"
40 |   },
41 |   "peerDependencies": {
42 |     "react-redux": "^4.0.0",
43 |     "react": "^0.14.0 || ^15.0.0-0",
44 |     "redux": "^2.0.0 || ^3.0.0"
45 |   },
46 |   "devDependencies": {
47 |     "autoprefixer": "^6.3.6",
48 |     "babel-cli": "^6.9.0",
49 |     "babel-core": "^6.7.7",
50 |     "babel-eslint": "^6.0.3",
51 |     "babel-loader": "^6.2.4",
52 |     "babel-plugin-transform-class-properties": "^6.9.0",
53 |     "babel-plugin-transform-object-assign": "^6.8.0",
54 |     "babel-preset-es2015": "^6.6.0",
55 |     "babel-preset-react": "^6.5.0",
56 |     "babel-preset-stage-0": "^6.5.0",
57 |     "babel-preset-stage-1": "^6.5.0",
58 |     "chai": "^3.5.0",
59 |     "chai-jquery": "^2.0.0",
60 |     "cheerio": "^0.20.0",
61 |     "colors": "^1.1.2",
62 |     "copy-webpack-plugin": "^2.1.3",
63 |     "cross-env": "^1.0.8",
64 |     "css-loader": "^0.23.1",
65 |     "eslint": "^2.8.0",
66 |     "eslint-plugin-react": "^5.0.1",
67 |     "extract-text-webpack-plugin": "^1.0.1",
68 |     "file-loader": "^0.8.5",
69 |     "jquery": "^2.2.2",
70 |     "jscs": "^2.10.1",
71 |     "jsdom": "^8.2.0",
72 |     "json-loader": "^0.5.4",
73 |     "less-loader": "^2.2.3",
74 |     "mocha": "^2.4.5",
75 |     "node-sass": "^3.6.0",
76 |     "postcss-loader": "^0.8.2",
77 |     "react-addons-test-utils": "^15.0.1",
78 |     "react-hot-loader": "^1.3.0",
79 |     "redux-devtools": "^3.2.0",
80 |     "redux-devtools-dock-monitor": "^1.1.1",
81 |     "redux-devtools-log-monitor": "^1.0.11",
82 |     "redux-immutable-state-invariant": "^1.2.3",
83 |     "redux-logger": "^2.6.1",
84 |     "redux-slider-monitor": "^1.0.5",
85 |     "redux-thunk": "^2.1.0",
86 |     "rimraf": "^2.5.2",
87 |     "sass-loader": "^3.1.2",
88 |     "style-loader": "^0.13.0",
89 |     "url-loader": "^0.5.7",
90 |     "webpack": "^1.13.0",
91 |     "webpack-dev-server": "^1.14.1",
92 |     "webpack-externals-plugin": "^1.0.0"
93 |   }
94 | }
95 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const React = require('react');
  4 | const ReactDOM = require('react-dom');
  5 | const ReactDOMServer = require('react-dom/server');
  6 | const Redux = require('redux');
  7 | const Provider = require('react-redux').Provider;
  8 | const Immutable = require('seamless-immutable');
  9 | 
 10 | const Store = require('./Store');
 11 | 
 12 | 
 13 | /**
 14 |  * Base app class
 15 |  * @deprecated
 16 |  */
 17 | class App {
 18 |     /**
 19 |      * @param {Object} [state]
 20 |      * @param {Array.<function>} [middlewares]
 21 |      * @param {Array.<function>} [enhancers]
 22 |      * @deprecated
 23 |      */
 24 |     constructor(state = {}, middlewares = [], enhancers = []) {
 25 |         /**
 26 |          * @type {Store}
 27 |          * @protected
 28 |          */
 29 |         this._store = null;
 30 | 
 31 |         /**
 32 |          * @type {Array.<function>}
 33 |          * @private
 34 |          */
 35 |         this._middlewares = middlewares;
 36 | 
 37 |         /**
 38 |          * @type {function}
 39 |          * @private
 40 |          */
 41 |         this._middleware = Redux.applyMiddleware(...this._middlewares);
 42 | 
 43 |         /**
 44 |          * @type {Array.<function>}
 45 |          * @private
 46 |          */
 47 |         this._enhancers = enhancers;
 48 | 
 49 |         /**
 50 |          * @type {function}
 51 |          * @private
 52 |          */
 53 |         this._enhancer = Redux.compose(this._middleware, ...this._enhancers);
 54 | 
 55 |         /**
 56 |          * @type {Object}
 57 |          * @private
 58 |          */
 59 |         this._initialState = Immutable(state);
 60 |     }
 61 | 
 62 |     /**
 63 |      * @param {Object} [state]
 64 |      * @returns {App}
 65 |      * @deprecated
 66 |      */
 67 |     configure(state = {}) {
 68 |         this._store = this._createStore(state);
 69 |         this._store.init();
 70 | 
 71 |         return this;
 72 |     }
 73 | 
 74 |     /**
 75 |      * @param {HTMLElement|*} node
 76 |      * @returns {App}
 77 |      */
 78 |     renderTo(node) {
 79 |         ReactDOM.render(React.createElement(Provider, {
 80 |             store: this._store,
 81 |             children: React.createElement(this._render)
 82 |         }), node);
 83 | 
 84 |         return this;
 85 |     }
 86 | 
 87 |     /**
 88 |      * @returns {string}
 89 |      */
 90 |     renderHtml() {
 91 |         if (!this._store) throw new Error('The App is not configured.');
 92 | 
 93 |         return ReactDOMServer.renderToString(React.createElement(Provider, {
 94 |             store: this._store,
 95 |             children: React.createElement(this._render)
 96 |         }));
 97 |     }
 98 | 
 99 |     /**
100 |      * @returns {string}
101 |      */
102 |     renderStaticHtml() {
103 |         if (!this._store) throw new Error('The App is not configured.');
104 | 
105 |         return ReactDOMServer.renderToStaticMarkup(React.createElement(Provider, {
106 |             store: this._store,
107 |             children: React.createElement(this._render)
108 |         }));
109 |     }
110 | 
111 |     /**
112 |      * @returns {XML}
113 |      * @private
114 |      */
115 |     _render() {
116 |         return React.createElement('div');
117 |     }
118 | 
119 |     /**
120 |      * @param {function} middleware
121 |      * @param {number|null} [index]
122 |      * @returns {App}
123 |      * @protected
124 |      */
125 |     _addMiddleware(middleware, index = null) {
126 |         if (index === null) this._middlewares.push(middleware);
127 |         else this._middlewares.splice(index, 0, middleware);
128 | 
129 |         this._middleware = Redux.applyMiddleware(...this._middlewares);
130 |         this._enhancer = Redux.compose(this._middleware, ...this._enhancers);
131 | 
132 |         return this;
133 |     }
134 | 
135 |     /**
136 |      * @param {function} enhancer
137 |      * @param {number|null} [index]
138 |      * @returns {App}
139 |      * @protected
140 |      */
141 |     _addEnhancer(enhancer, index = null) {
142 |         if (index === null) this._enhancers.push(enhancer);
143 |         else this._enhancers.splice(index, 0, enhancer);
144 | 
145 |         this._middleware = Redux.applyMiddleware(...this._middlewares);
146 |         this._enhancer = Redux.compose(this._middleware, ...this._enhancers);
147 | 
148 |         return this;
149 |     }
150 | 
151 |     /**
152 |      * @param {Object} [state]
153 |      * @returns {Store}
154 |      * @protected
155 |      */
156 |     _createStore(state = {}) {
157 |         return new Store(this._initialState.merge(state || {}, {deep: true}), [], this._enhancer);
158 |     }
159 | 
160 |     /**
161 |      * @returns {Store}
162 |      */
163 |     get store() {
164 |         return this._store;
165 |     }
166 | }
167 | 
168 | 
169 | module.exports = App;


--------------------------------------------------------------------------------
/src/Container.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const React = require('react');
  4 | const ReactRedux = require('react-redux');
  5 | const Controller = require('./Controller');
  6 | 
  7 | 
  8 | /**
  9 |  * Abstract container
 10 |  * 
 11 |  * @extends React.Component
 12 |  */
 13 | class Container extends React.Component {
 14 |     /**
 15 |      * @returns {React.Component}
 16 |      */
 17 |     static connect() {
 18 |         this.__connected = true;
 19 | 
 20 |         return ReactRedux.connect(
 21 |             (state) => {
 22 |                 let mapper = this['mapper'];
 23 |                 return mapper ? mapper(state) : {};
 24 |             }
 25 |         )(this);
 26 |     }
 27 | 
 28 |     static mapper() {
 29 |         return {};
 30 |     }
 31 | 
 32 |     /**
 33 |      * @param {Object} props
 34 |      * @param {Object} context
 35 |      */
 36 |     constructor(props, context) {
 37 |         super(props);
 38 | 
 39 |         this._store = context.store;
 40 | 
 41 |         if (!this.constructor.__connected) throw new Error('The Container class ' + this.constructor.name + ' is not connected.');
 42 | 
 43 |         this._actions = this._actions || {};
 44 |         _mapStore(this._actions, this._store);
 45 |     }
 46 | 
 47 |     /**
 48 |      * @param {Object} props
 49 |      */
 50 |     shouldComponentUpdate(props) {
 51 |         let keys = Object.keys(props);
 52 | 
 53 |         for (let i = 0, l = keys.length; i < l; i ++) {
 54 |             if (props[keys[i]] !== this.props[keys[i]]) return true;
 55 |         }
 56 | 
 57 |         return false;
 58 |     }
 59 | 
 60 |     /**
 61 |      * @param {Object} props
 62 |      * @param {Object} context
 63 |      */
 64 |     componentWillReceiveProps(props, context) {
 65 |         this._store = context.store;
 66 |         _mapStore(this._actions, context.store);
 67 |     }
 68 | 
 69 |     /**
 70 |      * @param {string} type
 71 |      * @param {Object} data
 72 |      */
 73 |     dispatch(type, data) {
 74 |         this._store.dispatch(Object.assign({type}, data));
 75 |     }
 76 | 
 77 |     /**
 78 |      * @returns {Object|Controller}
 79 |      */
 80 |     get actions() {
 81 |         return this._actions || {};
 82 |     }
 83 | 
 84 |     /**
 85 |      * @param {Object|Controller} actions
 86 |      */
 87 |     set actions(actions) {
 88 |         this._actions = Object.assign(this._actions || {}, actions || {});
 89 |         if (this._store) _mapStore(this._actions, this._store);
 90 |     }
 91 | }
 92 | 
 93 | Container.contextTypes = {
 94 |     store: React.PropTypes.object
 95 | };
 96 | 
 97 | 
 98 | function _mapStore(actions, store) {
 99 |     if (actions instanceof Controller) actions.attachTo(store);
100 | 
101 |     Object.keys(actions).forEach(key => {
102 |         let action = actions[key];
103 |         if (action && (typeof action === 'object') && !Array.isArray(action)) _mapStore(action, store);
104 |     });
105 | }
106 | 
107 | 
108 | module.exports = Container;
109 | 


--------------------------------------------------------------------------------
/src/Controller.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | 
 4 | /**
 5 |  * Abstract controller
 6 |  */
 7 | class Controller {
 8 |     /**
 9 |      * @param {Store} [store]
10 |      */
11 |     constructor(store) {
12 |         this._store = store || null;
13 | 
14 |         Object.getOwnPropertyNames(Object.getPrototypeOf(this)).forEach(name => {
15 |             if (name === 'constructor') return;
16 |             if (!this[name] || (typeof this[name] !== 'function')) return;
17 |             this[name] = this[name].bind(this);
18 |         });
19 |     }
20 | 
21 |     /**
22 |      * @param {Store} store
23 |      */
24 |     attachTo(store) {
25 |         this._store = store;
26 |     }
27 | 
28 |     //noinspection JSMethodCanBeStatic,JSUnusedLocalSymbols
29 |     /**
30 |      * @param {string} type
31 |      * @param {Object} [data]
32 |      * @protected
33 |      */
34 |     dispatch(type, data = {}) {
35 |         if (!this._store) throw new Error('Store not set.');
36 |         this._store.dispatch(Object.assign({type}, data));
37 |     }
38 | 
39 |     /**
40 |      * @returns {Object}
41 |      */
42 |     getState() {
43 |         if (!this._store) throw new Error('Store not set.');
44 |         return this._store.getState();
45 |     }
46 | 
47 |     /**
48 |      * @returns {Object}
49 |      */
50 |     get state() {
51 |         if (!this._store) throw new Error('Store not set.');
52 |         return this._store.getState();
53 |     }
54 | }
55 | 
56 | 
57 | module.exports = Controller;


--------------------------------------------------------------------------------
/src/Store.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const Redux = require('redux');
  4 | const EventEmitter = require('eventemitter3');
  5 | const Immutable = require('seamless-immutable');
  6 | 
  7 | 
  8 | /**
  9 |  * Redux store wrapper
 10 |  *
 11 |  * @extends EventEmitter
 12 |  */
 13 | class Store extends EventEmitter {
 14 |     /**
 15 |      * @param {Object} [state]
 16 |      * @param {Array.<function>} [middlewares]
 17 |      * @param {Array.<function>} [enhancers]
 18 |      */
 19 |     constructor(state = {}, middlewares = [], enhancers = []) {
 20 |         super();
 21 | 
 22 |         /**
 23 |          * @type {Array.<function>}
 24 |          * @private
 25 |          */
 26 |         this._middlewares = middlewares;
 27 | 
 28 |         /**
 29 |          * @type {function}
 30 |          * @private
 31 |          */
 32 |         this._middleware = Redux.applyMiddleware(...this._middlewares);
 33 | 
 34 |         /**
 35 |          * @type {Array.<function>}
 36 |          * @private
 37 |          */
 38 |         this._enhancers = enhancers;
 39 | 
 40 |         /**
 41 |          * @type {function}
 42 |          * @private
 43 |          */
 44 |         this._enhancer = Redux.compose(this._middleware, ...this._enhancers);
 45 | 
 46 |         /**
 47 |          * @type {Object.<string,Object.<string,Array.<function>>>}
 48 |          * @private
 49 |          */
 50 |         this._reducers = {};
 51 | 
 52 |         /**
 53 |          * @type {Object.<string,function>}
 54 |          * @private
 55 |          */
 56 |         this._thunkActions = {};
 57 | 
 58 |         /**
 59 |          * @type {Object}
 60 |          * @private
 61 |          */
 62 |         this._store = null;
 63 | 
 64 |         this._initialState = Immutable(state || {});
 65 | 
 66 |         this.dispatch = this.dispatch.bind(this);
 67 |         this.getState = this.getState.bind(this);
 68 |     }
 69 | 
 70 |     /**
 71 |      * Init store. after this you can't add middlewares and enhancers.
 72 |      */
 73 |     init() {
 74 |         if (this._store) throw new Error('Store is already initiated, you cannot initiate it twice.');
 75 | 
 76 |         this._store = Redux.createStore(this._reducer.bind(this), this._initialState, this._enhancer);
 77 |     }
 78 | 
 79 |     //noinspection InfiniteRecursionJS
 80 |     /**
 81 |      * @param {string} [type]
 82 |      * @param {Object} payload
 83 |      * @return {*}
 84 |      */
 85 |     dispatch(type, payload) {
 86 |         if (!this._store) throw new Error('Store is not initiated yet. You cannot dispatch actions before calling init.');
 87 | 
 88 |         let action = null;
 89 | 
 90 |         if (arguments.length === 1) {
 91 |             if (typeof type === 'string') action = {type};
 92 |             else action = arguments[0];
 93 |         } else {
 94 |             action = {type, payload};
 95 |         }
 96 | 
 97 |         if (!action) throw new Error('Invalid dispatch arguments.');
 98 |         if (typeof action.type !== 'string') throw new Error('Actions must have a type and it must be a string.');
 99 | 
100 |         if (this._thunkActions.hasOwnProperty(type)) {
101 |             return this._thunkActions[type](action, this.dispatch, this.getState);
102 |         }
103 | 
104 |         return this._store.dispatch(action);
105 |     }
106 | 
107 |     /**
108 |      * @return {*}
109 |      */
110 |     getState() {
111 |         if (!this._store) throw new Error('Store is not initiated yet. You cannot get state before calling init.');
112 | 
113 |         return this._store.getState.apply(this._store, arguments);
114 |     }
115 | 
116 |     /**
117 |      * @return {*}
118 |      */
119 |     subscribe() {
120 |         if (!this._store) throw new Error('Store is not initiated yet. You cannot subscribe before calling init.');
121 | 
122 |         return this._store.subscribe.apply(this._store, arguments);
123 |     }
124 | 
125 |     /**
126 |      * @param {string} action
127 |      * @param {string} [path]
128 |      * @param {function} reducer
129 |      */
130 |     addReducer(action, path, reducer) {
131 |         if (arguments.length === 2) {
132 |             reducer = arguments[2];
133 |             path = '';
134 |         }
135 | 
136 |         path = (path || '*') + '';
137 | 
138 |         this._reducers[action] = this._reducers[action] || {};
139 |         this._reducers[action][path] = this._reducers[action][path] || [];
140 |         this._reducers[action][path].push(reducer);
141 |     }
142 | 
143 |     /**
144 |      * @param {string} action
145 |      * @param {string} [path]
146 |      * @param {function} reducer
147 |      */
148 |     removeReducer(action, path, reducer) {
149 |         if (arguments.length === 2) {
150 |             reducer = arguments[2];
151 |             path = '';
152 |         }
153 | 
154 |         path = (path || '*') + '';
155 | 
156 |         if (!this._reducers[action] || !this._reducers[action][path]) return;
157 | 
158 |         let index = this._reducers[action][path].indexOf(reducer);
159 |         if (index !== -1) this._reducers[action][path].splice(index, 1);
160 |     }
161 | 
162 |     /**
163 |      * @param {Object.<string,Object.<string,Array.<function>|function>>} reducers
164 |      */
165 |     addReducers(reducers) {
166 |         Object.keys(reducers).forEach(action => {
167 |             Object.keys(reducers[action]).forEach(path => {
168 |                 this._reducers[action] = this._reducers[action] || {};
169 |                 this._reducers[action][path] = this._reducers[action][path] || [];
170 |                 this._reducers[action][path] = this._reducers[action][path].concat(reducers[action][path]);
171 |             });
172 |         });
173 |     }
174 | 
175 |     /**
176 |      * @param {Object.<string,Object.<string,Array.<function>|function>>} reducers
177 |      */
178 |     removeReducers(reducers) {
179 |         Object.keys(reducers).forEach(action => {
180 |             Object.keys(reducers[action]).forEach(path => {
181 |                 if (!this._reducers[action] || !this._reducers[action][path]) return;
182 | 
183 |                 reducers[action][path].forEach(reducer => {
184 |                     let index = this._reducers[action][path].indexOf(reducer);
185 |                     if (index !== -1) this._reducers[action][path].splice(index, 1);
186 |                 });
187 |             });
188 |         });
189 |     }
190 | 
191 |     /**
192 |      * @param {Object.<string,function>} actions
193 |      */
194 |     addThunkActions(actions) {
195 |         Object.keys(actions).forEach(type => this._thunkActions[type] = actions[type]);
196 |     }
197 | 
198 |     /**
199 |      * @param {Object.<string,function>|Array.<string>} actions
200 |      */
201 |     removeThunkActions(actions) {
202 |         if (Array.isArray(actions)) actions.forEach(type => delete this._thunkActions[type]);
203 |         else Object.keys(actions).forEach(type => delete this._thunkActions[type]);
204 |     }
205 | 
206 |     /**
207 |      * @param {function} middleware
208 |      * @param {number|null} [index]
209 |      * @returns {Store}
210 |      */
211 |     addMiddleware(middleware, index = null) {
212 |         if (this._store) throw new Error('Store is already initiated, you cannot add middleware.');
213 | 
214 |         if (index === null) this._middlewares.push(middleware);
215 |         else this._middlewares.splice(index, 0, middleware);
216 | 
217 |         this._middleware = Redux.applyMiddleware(...this._middlewares);
218 |         this._enhancer = Redux.compose(this._middleware, ...this._enhancers);
219 | 
220 |         return this;
221 |     }
222 | 
223 |     /**
224 |      * @param {function} enhancer
225 |      * @param {number|null} [index]
226 |      * @returns {Store}
227 |      */
228 |     addEnhancer(enhancer, index = null) {
229 |         if (this._store) throw new Error('Store is already initiated, you cannot add enhancers.');
230 | 
231 |         if (index === null) this._enhancers.push(enhancer);
232 |         else this._enhancers.splice(index, 0, enhancer);
233 | 
234 |         this._middleware = Redux.applyMiddleware(...this._middlewares);
235 |         this._enhancer = Redux.compose(this._middleware, ...this._enhancers);
236 | 
237 |         return this;
238 |     }
239 | 
240 |     /**
241 |      * @param {Object} state
242 |      * @param {Object} action
243 |      * @param {Object} action.type
244 |      * @private
245 |      */
246 |     _reducer(state, action) {
247 |         let reducers = this._reducers['*'];
248 |         if (reducers) state = this._reduce(reducers, state, action);
249 | 
250 |         reducers = this._reducers[action.type];
251 |         if (reducers) state = this._reduce(reducers, state, action);
252 | 
253 |         this.emit('*', action, state);
254 |         this.emit(action.type, action, state);
255 | 
256 |         return state;
257 |     }
258 | 
259 |     /**
260 |      * @param {Object} reducers
261 |      * @param {Object} state
262 |      * @param {Object} action
263 |      * @returns {Object}
264 |      * @private
265 |      */
266 |     _reduce(reducers, state, action) {
267 |         return Object.keys(reducers).reduce((state, path) => reducers[path].reduce((state, reducer) => {
268 |             if (path === '*') return Immutable(reducer(state, action));
269 | 
270 |             let arr = path.split('.');
271 |             let local = arr.reduce((state, key) => state ? state[key] : state, state);
272 | 
273 |             return state.setIn(arr, Immutable(reducer(local, action)));
274 |         }, state), state);
275 |     }
276 | 
277 |     /**
278 |      * @returns {*}
279 |      */
280 |     get state() {
281 |         if (!this._store) throw new Error('Store is not initiated yet. You cannot get state before calling init.');
282 | 
283 |         return this._store.getState();
284 |     }
285 | }
286 | 
287 | 
288 | module.exports = Store;


--------------------------------------------------------------------------------
/src/View.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const React = require('react');
  4 | const ReactDOM = require('react-dom');
  5 | const ReactDOMServer = require('react-dom/server');
  6 | const {Provider} = require('react-redux');
  7 | 
  8 | 
  9 | /**
 10 |  * Main container
 11 |  */
 12 | class Container extends React.Component {
 13 |     constructor(props, context) {
 14 |         super(props, context);
 15 | 
 16 |         this.state = {
 17 |             component: props.component
 18 |         };
 19 | 
 20 |         props.subscribe(this);
 21 |     }
 22 | 
 23 |     setComponent(component) {
 24 |         this.setState({component});
 25 |     }
 26 | 
 27 |     render() {
 28 |         return this.state.component || <div></div>;
 29 |     }
 30 | }
 31 | 
 32 | 
 33 | /**
 34 |  * Root view
 35 |  */
 36 | class View {
 37 |     /**
 38 |      * @param {Store} store
 39 |      * @param {Object} component
 40 |      */
 41 |     constructor(store, component) {
 42 |         /**
 43 |          * @type {Store}
 44 |          * @protected
 45 |          */
 46 |         this._store = store;
 47 | 
 48 |         /**
 49 |          * @type {Object}
 50 |          * @protected
 51 |          */
 52 |         this._component = component;
 53 |     }
 54 | 
 55 |     /**
 56 |      * @return {Object}
 57 |      */
 58 |     render() {
 59 |         return React.createElement(Provider, {
 60 |             store: this._store,
 61 |             children: React.createElement(Container, {
 62 |                 component: this._component,
 63 |                 subscribe: (cmp) => this._container = cmp
 64 |             })
 65 |         });
 66 |     }
 67 | 
 68 |     /**
 69 |      * @param {HTMLElement|*} node
 70 |      * @returns {View}
 71 |      */
 72 |     renderTo(node) {
 73 |         ReactDOM.render(this.render(), node);
 74 |     }
 75 | 
 76 |     /**
 77 |      * @returns {string}
 78 |      */
 79 |     renderHtml() {
 80 |         if (!this._store) throw new Error('The View is not configured.');
 81 |         return ReactDOMServer.renderToString(this.render());
 82 |     }
 83 | 
 84 |     /**
 85 |      * @returns {string}
 86 |      */
 87 |     renderStaticHtml() {
 88 |         if (!this._store) throw new Error('The View is not configured.');
 89 |         return ReactDOMServer.renderToStaticMarkup(this.render());
 90 |     }
 91 | 
 92 |     /**
 93 |      * @param {Object} component
 94 |      */
 95 |     set component(component) {
 96 |         this._component = component;
 97 |         this._container && this._container.setComponent(component);
 98 |     }
 99 | 
100 |     /**
101 |      * @return {Object}
102 |      */
103 |     get component() {
104 |         return this._component;
105 |     }
106 | 
107 |     /**
108 |      * @returns {Store}
109 |      */
110 |     get store() {
111 |         return this._store;
112 |     }
113 | }
114 | 
115 | 
116 | module.exports = View;


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const App = require('./App');
 4 | const Store = require('./Store');
 5 | const Controller = require('./Controller');
 6 | const Container = require('./Container');
 7 | const View = require('./View');
 8 | 
 9 | 
10 | module.exports = {
11 |     App: App,
12 |     Container: Container,
13 |     Controller: Controller,
14 |     Store: Store,
15 |     View: View
16 | };


--------------------------------------------------------------------------------
/webpack.config.dev.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | const path = require('path');
 4 | const webpack = require('webpack');
 5 | 
 6 | 
 7 | module.exports = {
 8 |     env : process.env.NODE_ENV,
 9 |     entry: {
10 |         app: path.resolve(path.resolve(__dirname, 'example'), 'bootstrap.js'),
11 |         vendor: ['react', 'redux', 'react-redux']
12 |     },
13 |     output: {
14 |         path: path.resolve(__dirname, 'build'),
15 |         filename: '[name].js',
16 |         publicPath: '/'
17 |     },
18 |     stats: {
19 |         colors: true,
20 |         reasons: true
21 |     },
22 |     resolve: {
23 |         extensions: ['', '.js', '.jsx']
24 |     },
25 |     module: {
26 |         loaders: [
27 |             {
28 |                 exclude: /(node_modules|bower_components)/,
29 |                 test: /\.jsx?$/,
30 |                 loaders: ['react-hot', 'babel?presets[]=stage-0&presets[]=react&presets[]=es2015&plugins[]=transform-class-properties']
31 |             }
32 |         ]
33 |     },
34 |     plugins: [
35 |         new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js'),
36 |         new webpack.NoErrorsPlugin(),
37 |         new webpack.DefinePlugin({
38 |             'process.env.NODE_ENV': JSON.stringify('development'),
39 |             __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false'))
40 |         }),
41 |         new webpack.optimize.OccurenceOrderPlugin()
42 |     ],
43 |     devServer: {
44 |         contentBase: path.resolve(__dirname, 'example'),
45 |         port: 3000
46 |     },
47 |     devtool: 'eval'
48 | };


--------------------------------------------------------------------------------
/webpack.config.prod.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | const path = require('path');
  4 | const webpack = require('webpack');
  5 | const ExternalsPlugin = require('webpack-externals-plugin');
  6 | 
  7 | const env = process.env.NODE_ENV;
  8 | 
  9 | const reduxExternal = {
 10 |     root: 'Redux',
 11 |     commonjs2: 'redux',
 12 |     commonjs: 'redux',
 13 |     amd: 'redux'
 14 | };
 15 | 
 16 | const reactExternal = {
 17 |     root: 'React',
 18 |     commonjs2: 'react',
 19 |     commonjs: 'react',
 20 |     amd: 'react'
 21 | };
 22 | 
 23 | const reactDomExternal = {
 24 |     root: 'ReactDOM',
 25 |     commonjs2: 'react-dom',
 26 |     commonjs: 'react-dom',
 27 |     amd: 'react-dom'
 28 | };
 29 | 
 30 | const reactDomServerExternal = {
 31 |     root: 'ReactDOMServer',
 32 |     commonjs2: 'react-dom/server',
 33 |     commonjs: 'react-dom/server',
 34 |     amd: 'react-dom/server'
 35 | };
 36 | 
 37 | const reactReduxExternal = {
 38 |     root: 'ReactRedux',
 39 |     commonjs2: 'react-redux',
 40 |     commonjs: 'react-redux',
 41 |     amd: 'react-redux'
 42 | };
 43 | 
 44 | const reactEventEmitterExternal = {
 45 |     root: 'EventEmitter',
 46 |     commonjs2: 'eventemitter3',
 47 |     commonjs: 'eventemitter3',
 48 |     amd: 'eventemitter3'
 49 | };
 50 | 
 51 | const reactSeamlessImmutableExternal = {
 52 |     root: 'SeamlessImmutable',
 53 |     commonjs2: 'seamless-immutable',
 54 |     commonjs: 'seamless-immutable',
 55 |     amd: 'seamless-immutable'
 56 | };
 57 | 
 58 | 
 59 | let config = {
 60 |     entry: {
 61 |         app: path.resolve(path.resolve(__dirname + '/src'), 'index.js')
 62 |     },
 63 |     output: {
 64 |         library: 'ReactReduxOOP',
 65 |         libraryTarget: 'umd'
 66 |     },
 67 |     stats: {
 68 |         colors: true
 69 |     },
 70 |     resolve: {
 71 |         extensions: ['', '.js', '.jsx']
 72 |     },
 73 |     module: {
 74 |         noParse: /\.min\.js$/,
 75 |         loaders: [
 76 |             {test: /\.js$/, exclude: /node_modules/, loaders: ['babel-loader']}
 77 |         ]
 78 |     },
 79 |     plugins: [
 80 |         new webpack.optimize.OccurenceOrderPlugin(),
 81 |         new webpack.DefinePlugin({
 82 |             'process.env.NODE_ENV': JSON.stringify(env)
 83 |         })
 84 |     ],
 85 |     externals: {
 86 |         'redux': reduxExternal,
 87 |         'react': reactExternal,
 88 |         'react-dom': reactDomExternal,
 89 |         'react-dom/server': reactDomServerExternal,
 90 |         'react-redux': reactReduxExternal,
 91 |         'eventemitter3': reactEventEmitterExternal,
 92 |         'seamless-immutable': reactSeamlessImmutableExternal,
 93 |     },
 94 |     devtool: 'source-map'
 95 | };
 96 | 
 97 | if (process.env.NODE_ENV === 'production') {
 98 |     config.plugins.push(
 99 |         new webpack.optimize.UglifyJsPlugin({
100 |             compressor: {
101 |                 pure_getters: true,
102 |                 unsafe: true,
103 |                 unsafe_comps: true,
104 |                 screw_ie8: true,
105 |                 warnings: false
106 |             }
107 |         })
108 |     )
109 | }
110 | 
111 | module.exports = config;


--------------------------------------------------------------------------------