refactor file structure

README.md

@@ -21,7 +21,7 @@ Redux is awesome. In order to make redux architecture fractal. We only need two
 
 2. Don't use `bindActionCreators`, just pass `dispatch` as the parameter to the components.
 
-  What the component needed is model (the data) and dispatch (a way to communicate with the rest architecture). It doesnt need the action callback as the parameters. It is an implementation detail that encapsulated by the reducer. IMO, a truly reusable component module was made by View, action, reducer, effect, init. Not just the component view.
+  What the component needed is model (the data) and dispatch (a way to communicate with the rest architecture). It doesnt need the action callback as the parameters.
 
 This repo is port of the elm architecture examples in redux with redux-loop to show the benefits of hierarchical composition everywhere. In this example, I used my fork of [redux-loop](https://github.com/jarvisaoieong/redux-loop) and [redux-logger](https://github.com/jarvisaoieong/redux-logger) to demonstrate how to log the high order action and async action. (Please open the console in the [live demo](http://jarvisaoieong.github.io/redux-architecture/).)
 

src/containers/CounterContainer.js

@@ -1,5 +1,5 @@
 import {connect} from 'react-redux';
-import Counter from 'components/counter/Counter';
+import Counter from 'modules/counter/Counter';
 
 export default connect(
   (state) => ({

src/containers/CounterFancyContainer.js

@@ -1,5 +1,5 @@
 import {connect} from 'react-redux';
-import CounterFancy from 'components/counterFancy/CounterFancy';
+import CounterFancy from 'modules/counterFancy/CounterFancy';
 
 export default connect(
   (state) => ({

src/containers/CounterListContainer.js

@@ -1,5 +1,5 @@
 import {connect} from 'react-redux';
-import CounterList from 'components/counterList/CounterList';
+import CounterList from 'modules/counterList/CounterList';
 
 export default connect(
   (state) => ({

src/containers/CounterPairContainer.js

@@ -1,5 +1,5 @@
 import {connect} from 'react-redux';
-import CounterPair from 'components/counterPair/CounterPair';
+import CounterPair from 'modules/counterPair/CounterPair';
 
 export default connect(
   (state) => ({

src/containers/RandomGifContainer.js

@@ -1,5 +1,5 @@
 import {connect} from 'react-redux';
-import RandomGif from 'components/randomGif/RandomGif';
+import RandomGif from 'modules/randomGif/RandomGif';
 
 export default connect(
   (state) => ({

src/containers/RandomGifListContainer.js

@@ -1,5 +1,5 @@
 import {connect} from 'react-redux';
-import RandomGifList from 'components/randomGifList/RandomGifList';
+import RandomGifList from 'modules/randomGifList/RandomGifList';
 
 export default connect(
   (state) => ({

src/containers/RandomGifPairContainer.js

@@ -1,5 +1,5 @@
 import {connect} from 'react-redux';
-import RandomGifPair from 'components/randomGifPair/RandomGifPair';
+import RandomGifPair from 'modules/randomGifPair/RandomGifPair';
 
 export default connect(
   (state) => ({

src/initialState.js

@@ -1,8 +1,8 @@
 import {loop, Effects} from '@jarvisaoieong/redux-loop';
 
-import randomGifInit from 'components/randomGif/randomGifInit';
-import randomGifPairInit from 'components/randomGifPair/randomGifPairInit';
-import randomGifListInit from 'components/randomGifList/randomGifListInit';
+import randomGifInit from 'modules/randomGif/randomGifInit';
+import randomGifPairInit from 'modules/randomGifPair/randomGifPairInit';
+import randomGifListInit from 'modules/randomGifList/randomGifListInit';
 
 const {
   model: randomGifModel,

src/components/counterFancy/CounterWithRemoveButton.js → src/modules/counterFancy/CounterWithRemoveButton.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 
-import Counter from 'components/counter/Counter'
+import Counter from 'modules/counter/Counter'
 import {remove, modify} from './counterFancyActions';
 
 export default class CounterWithRemoveButton extends Component {

src/components/counterFancy/counterFancyInit.js → src/modules/counterFancy/counterFancyInit.js

@@ -1,4 +1,4 @@
-import counterInit from 'components/counter/counterInit';
+import counterInit from 'modules/counter/counterInit';
 
 export default (count) => ({
   counters: [{id: 0, data: counterInit(count)}],

src/components/counterFancy/counterFancyReducer.js → src/modules/counterFancy/counterFancyReducer.js

@@ -1,7 +1,7 @@
 import {ADD, REMOVE, MODIFY} from './counterFancyActions';
 import _ from 'lodash';
-import counterReducer, {initialState as counterInitialState} from 'components/counter/counterReducer';
-import counterInit from 'components/counter/counterInit';
+import counterReducer, {initialState as counterInitialState} from 'modules/counter/counterReducer';
+import counterInit from 'modules/counter/counterInit';
 
 export const initialState = {
   counters: [{id: 0, data: counterInitialState}],

src/components/counterList/CounterList.js → src/modules/counterList/CounterList.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import _ from 'lodash';
 
-import Counter from 'components/counter/Counter'
+import Counter from 'modules/counter/Counter'
 import {add, modify, remove} from './counterListActions';
 
 export default class CounterList extends Component {

src/components/counterList/counterListInit.js → src/modules/counterList/counterListInit.js

@@ -1,4 +1,4 @@
-import counterInit from 'components/counter/counterInit';
+import counterInit from 'modules/counter/counterInit';
 
 export default (count) => ({
   counters: [{id: 0, data: counterInit(count)}],

src/components/counterList/counterListReducer.js → src/modules/counterList/counterListReducer.js

@@ -1,7 +1,7 @@
 import {ADD, REMOVE, MODIFY} from './counterListActions';
 import _ from 'lodash';
-import counterReducer, {initialState as counterInitialState} from 'components/counter/counterReducer';
-import counterInit from 'components/counter/counterInit';
+import counterReducer, {initialState as counterInitialState} from 'modules/counter/counterReducer';
+import counterInit from 'modules/counter/counterInit';
 
 export const initialState = {
   counters: [{id: 0, data: counterInitialState}],

src/components/counterPair/CounterPair.js → src/modules/counterPair/CounterPair.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 
-import Counter from 'components/counter/Counter'
+import Counter from 'modules/counter/Counter'
 import {modifyFirst, modifySecond} from './counterPairActions';
 
 export default class CounterPair extends Component {

src/components/counterPair/countPairInit.js → src/modules/counterPair/countPairInit.js

@@ -1,4 +1,4 @@
-import counterInit from 'components/counter/counterInit';
+import counterInit from 'modules/counter/counterInit';
 
 export default (first, second) => ({
   first: counterInit(first),

src/components/counterPair/counterPairReducer.js → src/modules/counterPair/counterPairReducer.js

@@ -1,5 +1,5 @@
 import {MODIFY_FIRST, MODIFY_SECOND} from './counterPairActions';
-import counterReducer, {initialState as counterInitialState} from 'components/counter/counterReducer';
+import counterReducer, {initialState as counterInitialState} from 'modules/counter/counterReducer';
 
 export const initialState = {
   first: counterInitialState,

src/components/randomGifList/RandomGifList.js → src/modules/randomGifList/RandomGifList.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import _ from 'lodash';
 
-import RandomGif from 'components/randomGif/RandomGif'
+import RandomGif from 'modules/randomGif/RandomGif'
 import {create, modify} from './randomGifListActions';
 
 export default class RandomGifList extends Component {

src/components/randomGifList/randomGifListInit.js → src/modules/randomGifList/randomGifListInit.js

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import {loop, Effects} from '@jarvisaoieong/redux-loop';
-import randomGifInit from 'components/randomGif/randomGifInit';
+import randomGifInit from 'modules/randomGif/randomGifInit';
 import {modify} from './randomGifListActions';
 
 export default (topicList = []) => {

src/components/randomGifList/randomGifListReducer.js → src/modules/randomGifList/randomGifListReducer.js

@@ -1,8 +1,8 @@
 import _ from 'lodash';
 import {loop, Effects} from '@jarvisaoieong/redux-loop';
-import randomGifReducer, {initialState as randomGifInitialState} from 'components/randomGif/randomGifReducer';
+import randomGifReducer, {initialState as randomGifInitialState} from 'modules/randomGif/randomGifReducer';
 import {CREATE, MODIFY, modify} from './randomGifListActions';
-import randomGifInit from 'components/randomGif/randomGifInit';
+import randomGifInit from 'modules/randomGif/randomGifInit';
 
 export const initialState = {
   gifList: [{

src/components/randomGifPair/RandomGifPair.js → src/modules/randomGifPair/RandomGifPair.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 
-import RandomGif from 'components/randomGif/RandomGif'
+import RandomGif from 'modules/randomGif/RandomGif'
 import {modifyFirst, modifySecond} from './randomGifPairActions';
 
 export default class RandomGifPair extends Component {

src/components/randomGifPair/randomGifPairInit.js → src/modules/randomGifPair/randomGifPairInit.js

@@ -1,6 +1,6 @@
 import {loop, Effects} from '@jarvisaoieong/redux-loop';
 
-import randomGifInit from 'components/randomGif/randomGifInit';
+import randomGifInit from 'modules/randomGif/randomGifInit';
 import {modifyFirst, modifySecond} from './randomGifPairActions';
 
 export default (firstTopic, secondTopic) => {
@@ -9,7 +9,6 @@ export default (firstTopic, secondTopic) => {
     effect: firstEffect,
   } = randomGifInit(firstTopic);
 
-
   const {
     model: secondModel,
     effect: secondEffect,

src/components/randomGifPair/randomGifPairReducer.js → src/modules/randomGifPair/randomGifPairReducer.js

@@ -9,7 +9,7 @@ import {
 
 import randomGifReducer, {
   initialState as randomGifInitialState,
-} from 'components/randomGif/randomGifReducer';
+} from 'modules/randomGif/randomGifReducer';
 
 const initialState = {
   first: randomGifInitialState,

src/store/configureStore.js

@@ -2,20 +2,17 @@ import {createStore, applyMiddleware, compose} from 'redux';
 import {combineReducers, install} from '@jarvisaoieong/redux-loop';
 import createLogger from '@jarvisaoieong/redux-logger';
 
-import * as reducers from '../reducers';
+import reducer from './reducer';
 
 export default function configureStore({initialState}) {
-  const reducer = combineReducers(reducers);
-
   const store = createStore(reducer, initialState, compose(
     install(),
-    applyMiddleware(createLogger({collapsed: true}))
+    applyMiddleware(createLogger({collapsed: true})),
   ));
 
   if (process.env.NODE_ENV === 'development' && module.hot) {
-    module.hot.accept('../reducers', () => {
-      const nextReducers = require('../reducers');
-      const nextReducer = combineReducers(nextReducers);
+    module.hot.accept('./reducer', () => {
+      const nextReducer = require('./reducer');
       store.replaceReducer(nextReducer);
     });
   }

src/store/reducer.js

@@ -0,0 +1,18 @@
+import {combineReducers} from '@jarvisaoieong/redux-loop';
+import counter from 'modules/counter/counterReducer';
+import counterPair from 'modules/counterPair/counterPairReducer';
+import counterList from 'modules/counterList/counterListReducer';
+import counterFancy from 'modules/counterFancy/counterFancyReducer';
+import randomGif from 'modules/randomGif/randomGifReducer';
+import randomGifPair from 'modules/randomGifPair/randomGifPairReducer';
+import randomGifList from 'modules/randomGifList/randomGifListReducer';
+
+export default combineReducers({
+  counter,
+  counterPair,
+  counterList,
+  counterFancy,
+  randomGif,
+  randomGifPair,
+  randomGifList,
+});