├── .gitignore
├── .npmignore
├── LICENSE
├── README.md
├── package.json
└── src
    ├── devtools.js
    └── index.js


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | lib
3 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src/
2 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2016 Adam Brodzinski
 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 | # simple-redux-react
 2 | 
 3 | Getting the average app running with React, Redux, react-redux, redux-devtools, and react-router-redux, is getting way too complicated. I'm glad that it's so flexible and customizable but all of my projects follow a similar pattern when getting things going.
 4 | 
 5 | This project doesn't solve all edge cases... for those you can wire it up yourself or submit a PR if you think this is missing a commong config.
 6 | 
 7 | - Wires up React, Redux & redux-router
 8 | - Included Redux Dev Tools (only in devel/debug mode)
 9 | - Includes Generic Logger
10 | - Config to opt-out of these features (react-router opt out for RN coming soon)
11 | 
12 | 
13 | ## Installation
14 | `npm install --save simple-react-redux`
15 | 
16 | 
17 | ## Configuration
18 | 
19 | The most common cases are implied but can be overridden. Here's the most common case. The Redux dev tools and logger middlware are included by default (more can be added too, see customizing).
20 | 
21 | 
22 | While the above snippet gets a router working and redux up, you'll need at least one reducer to do any real work.
23 | 
24 | ```javascript
25 | import {registerRedux} from './simple-react-redux'
26 | 
27 | export const {dispatch} = registerRedux({
28 |   routes: require('./routes'),
29 |   renderToElementId: 'react-root',
30 |   reducers: {
31 |     app:   require('./reducers/app'),
32 |     posts: require('./reducers/posts'),
33 |   },
34 | });
35 | ```
36 | 
37 | 
38 | <br>
39 | 
40 | #### Customizing
41 | 
42 | You'll want to add reducers and middleware at some point so you can add those as needed.
43 | 
44 | ```javascript
45 | import {registerRedux} from 'simple-react-redux'
46 | 
47 | export const {dispatch} = registerRedux({
48 |   // default options are overridable
49 |   debug: false,                      // turns redux-devtools and logging on/off
50 |   renderToElementId: 'react-root',
51 |   disableLoggingMiddleware: false,
52 |   disableDevTools: false,            // turns off redux-devtools middleware
53 |   disableLogger: false,
54 |   
55 |   // pass in Routes component
56 |   routes: require('./routes'),
57 |   
58 |   // router reducer is already included, add more as needed
59 |   reducers: {
60 |     app:   require('./reducers/app'),
61 |     posts: require('./reducers/posts'),
62 |   },
63 | 
64 |   // optioally add your own middleware
65 |   middleware: [
66 |     myCustomMiddleware(),
67 |   ],
68 | });
69 | ```
70 | 
71 | 
72 | ## Exports
73 | 
74 | Sometimes you'll need access to the `store` or the `Root` view. You can use these:
75 | ```javascript
76 | const {store, dispatch, Root} = registerRedux(...);
77 | ```
78 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "simple-react-redux",
 3 |   "version": "1.0.0",
 4 |   "description": "A simpler way to use react-router-redux",
 5 |   "author": "Adam Brodzinski",
 6 |   "license": "MIT",
 7 |   "main": "lib/index.js",
 8 |   "scripts": {
 9 |     "test": "echo \"Error: no test specified\" && exit 1",
10 |     "compile": "babel --presets es2015,react,stage-2 -d lib/ src/",
11 |     "prepublish": "npm run compile"
12 |   },
13 |   "repository": {
14 |     "type": "git",
15 |     "url": "git+https://github.com/AdamBrodzinski/simple-redux-react.git"
16 |   },
17 |   "keywords": [
18 |     "redux",
19 |     "react",
20 |     "redux-router",
21 |     "react-router",
22 |     "simple"
23 |   ],
24 |   "bugs": {
25 |     "url": "https://github.com/AdamBrodzinski/simple-redux-react/issues"
26 |   },
27 |   "homepage": "https://github.com/AdamBrodzinski/simple-redux-react#readme",
28 |   "devDependencies": {
29 |     "babel-cli": "^6.5.1",
30 |     "babel-preset-es2015": "^6.5.0",
31 |     "babel-preset-react": "^6.5.0",
32 |     "babel-preset-stage-2": "^6.5.0",
33 |     "redux-devtools": "^3.0.0",
34 |     "redux-devtools-dock-monitor": "^1.0.1",
35 |     "redux-devtools-log-monitor": "^1.0.1"
36 |   },
37 |   "dependencies": {
38 |     "react": "^0.14.0",
39 |     "react-dom": "^0.14.0",
40 |     "react-redux": "^4.2.1",
41 |     "redux": "^3.2.1",
42 |     "react-router-redux": "^2.1.0",
43 |     "react-router": "2.0.0-rc5"
44 |   }
45 | }
46 | 


--------------------------------------------------------------------------------
/src/devtools.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import { createDevTools } from 'redux-devtools'
 3 | import LogMonitor from 'redux-devtools-log-monitor'
 4 | import DockMonitor from 'redux-devtools-dock-monitor'
 5 | 
 6 | export const DevTools = createDevTools(
 7 |   <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
 8 |     <LogMonitor theme="tomorrow" preserveScrollTop={false} />
 9 |   </DockMonitor>
10 | );
11 | 


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import ReactDOM from 'react-dom'
 3 | import { applyMiddleware, compose, createStore, combineReducers } from 'redux'
 4 | import { Provider } from 'react-redux'
 5 | import { Router, Route, browserHistory } from 'react-router'
 6 | import { syncHistory, routeReducer } from 'react-router-redux'
 7 | 
 8 | 
 9 | // a logger that's good enough for day one
10 | const genericlogger = store => next => action => {
11 |   console.log('[Dispatching]', action);
12 |   let result = next(action);
13 |   console.log('[Store]', store.getState());
14 |   return result;
15 | };
16 | 
17 | 
18 | const defaultOpts = {
19 |   debug: false,
20 |   renderToElementId: 'react-root',
21 |   disableLoggingMiddleware: false,
22 |   disableDevTools: false,
23 |   disableLogger: false,
24 |   reducers: {},
25 |   middleware: [],
26 | }
27 | 
28 | 
29 | export function registerRedux(userOpts) {
30 |   const defaultMiddlware = [];
31 |   const defaultEnhancers = [];
32 |   const opts = {...defaultOpts, ...userOpts};
33 | 
34 |   if (opts.debug) {
35 |     var {DevTools} = require('./devtools');
36 |     defaultEnhancers.push(DevTools.instrument());
37 |   }
38 | 
39 |   const reduxRouterMiddleware = syncHistory(browserHistory)
40 |   defaultMiddlware.push(reduxRouterMiddleware);
41 | 
42 |   if (!opts.debug || !opts.disableLogger) {
43 |     defaultMiddlware.push(genericlogger);
44 |   }
45 | 
46 |   const middleware = applyMiddleware(
47 |     ...defaultMiddlware,
48 |     ...opts.middleware
49 |   );
50 | 
51 | 
52 |   const reducer = combineReducers({
53 |     routing: routeReducer,
54 |     ...opts.reducers
55 |   })
56 | 
57 |   const store = compose(
58 |     middleware,
59 |     ...defaultEnhancers
60 |   )(createStore)(reducer);
61 | 
62 |   // Required for replaying actions from devtools to work
63 |   reduxRouterMiddleware.listenForReplays(store);
64 | 
65 |   if (!opts.routes) {
66 |     throw new Error("Missing `router` key with a component as it's value");
67 |   }
68 | 
69 |   const Root = () => (
70 |     <Provider store={store}>
71 |       <div>
72 |         <opts.routes history={browserHistory} />
73 |         {DevTools &&
74 |           <DevTools />
75 |         }
76 |       </div>
77 |     </Provider>
78 |   )
79 | 
80 |   if (opts.renderToElementId) {
81 |     ReactDOM.render(<Root />, document.getElementById(opts.renderToElementId));
82 |   }
83 | 
84 |   return {store, dispatch: store.dispatch, Root};
85 | }
86 | 


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