separated actions and reducers

react/actions/channel.js

@@ -0,0 +1,12 @@
+import * as actions from 'constants/action_types';
+
+// export action creators
+
+export function updateLoggedInChannel (name, shortId, longId) {
+  return {
+    type: actions.CHANNEL_UPDATE,
+    name,
+    shortId,
+    longId,
+  };
+};

react/actions/publish.js

@@ -29,15 +29,6 @@ export function updateClaim (value) {
   };
 };
 
-export function updateLoggedInChannel (name, shortId, longId) {
-  return {
-    type: actions.CHANNEL_UPDATE,
-    name,
-    shortId,
-    longId,
-  };
-};
-
 export function setPublishInChannel (channel) {
   return {
     type: actions.SET_PUBLISH_IN_CHANNEL,

react/app.js

@@ -2,17 +2,17 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {Provider} from 'react-redux';
 import {createStore} from 'redux';
-import Reducers from 'reducers';
-import PublishTool from 'containers/PublishTool';
+import Reducer from 'reducers';
+import Publish from 'containers/PublishTool';
 
 let store = createStore(
-  Reducers,
+  Reducer,
   window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
 );
 
 ReactDOM.render(
   <Provider store={store}>
-    <PublishTool />
+    <Publish />
   </Provider>,
   document.getElementById('react-publish-tool')
 )

react/constants/action_types.js

@@ -1,9 +1,11 @@
-// export action types
+// channel actions
+export const CHANNEL_UPDATE = 'CHANNEL_UPDATE';
+
+// publish actions
 export const FILE_SELECTED = 'FILE_SELECTED';
 export const FILE_CLEAR = 'FILE_CLEAR';
 export const METADATA_UPDATE = 'METADATA_UPDATE';
 export const CLAIM_UPDATE = 'CLAIM_UPDATE';
-export const CHANNEL_UPDATE = 'CHANNEL_UPDATE';
 export const SET_PUBLISH_IN_CHANNEL = 'SET_PUBLISH_IN_CHANNEL';
 export const PUBLISH_STATUS_UPDATE = 'PUBLISH_STATUS_UPDATE';
 export const ERROR_UPDATE = 'ERROR_UPDATE';

react/containers/ChannelCreateForm/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { updateLoggedInChannel } from 'actions';
+import { updateLoggedInChannel } from 'actions/channel';
 import View from './view';
 
 const mapDispatchToProps = dispatch => {

react/containers/ChannelLoginForm/index.js

@@ -1,5 +1,5 @@
 import { connect } from 'react-redux';
-import { updateLoggedInChannel } from 'actions';
+import { updateLoggedInChannel } from 'actions/channel';
 import View from './view';
 
 const mapDispatchToProps = dispatch => {

react/containers/ChannelSelect/index.js

@@ -1,11 +1,11 @@
 import {connect} from 'react-redux';
-import {setPublishInChannel} from 'actions';
+import {setPublishInChannel} from 'actions/publish';
 import View from './view.jsx';
 
-const mapStateToProps = state => {
+const mapStateToProps = ({ channel, publish }) => {
   return {
-    loggedInChannelName: state.loggedInChannel.name,
-    publishInChannel   : state.publishInChannel,
+    loggedInChannelName: channel.loggedInChannel.name,
+    publishInChannel   : publish.publishInChannel,
   };
 };
 

react/containers/Dropzone/index.js

@@ -1,12 +1,12 @@
 import { connect } from 'react-redux';
-import { selectFile, updateError } from 'actions';
+import { selectFile, updateError } from 'actions/publish';
 import View from './view';
 
-const mapStateToProps = state => {
+const mapStateToProps = ({ publish }) => {
   return {
-    file     : state.file,
-    thumbnail: state.metadata.thumbnail,
-    fileError: state.error.file,
+    file     : publish.file,
+    thumbnail: publish.metadata.thumbnail,
+    fileError: publish.error.file,
   };
 };
 

react/containers/PublishForm/index.js

@@ -1,21 +1,22 @@
 import {connect} from 'react-redux';
-import {clearFile, selectFile, updateError, updateLoggedInChannel, updatePublishStatus} from 'actions';
+import {clearFile, selectFile, updateError, updatePublishStatus} from 'actions/publish';
+import {updateLoggedInChannel} from 'actions/channel';
 import View from './view';
 
-const mapStateToProps = state => {
+const mapStateToProps = ({ channel, publish }) => {
   return {
-    file              : state.file,
-    claim             : state.claim,
-    title             : state.metadata.title,
-    thumbnail         : state.metadata.thumbnail,
-    description       : state.metadata.description,
-    license           : state.metadata.license,
-    nsfw              : state.metadata.nsfw,
-    loggedInChannel   : state.loggedInChannel,
-    publishInChannel  : state.publishInChannel,
-    fileError         : state.error.file,
-    urlError          : state.error.url,
-    publishSubmitError: state.error.publishSubmit,
+    loggedInChannel   : channel.loggedInChannel,
+    file              : publish.file,
+    claim             : publish.claim,
+    title             : publish.metadata.title,
+    thumbnail         : publish.metadata.thumbnail,
+    description       : publish.metadata.description,
+    license           : publish.metadata.license,
+    nsfw              : publish.metadata.nsfw,
+    publishInChannel  : publish.publishInChannel,
+    fileError         : publish.error.file,
+    urlError          : publish.error.url,
+    publishSubmitError: publish.error.publishSubmit,
   };
 };
 

react/containers/PublishMetadataInputs/index.js

@@ -1,12 +1,12 @@
 import {connect} from 'react-redux';
-import {updateMetadata} from 'actions';
+import {updateMetadata} from 'actions/publish';
 import View from './view';
 
-const mapStateToProps = state => {
+const mapStateToProps = ({ publish }) => {
   return {
-    description: state.metadata.description,
-    license    : state.metadata.license,
-    nsfw       : state.metadata.nsfw,
+    description: publish.metadata.description,
+    license    : publish.metadata.license,
+    nsfw       : publish.metadata.nsfw,
   };
 };
 

react/containers/PublishThumbnailInput/index.js

@@ -1,10 +1,10 @@
 import {connect} from 'react-redux';
-import {updateMetadata} from 'actions';
+import {updateMetadata} from 'actions/publish';
 import View from './view';
 
-const mapStateToProps = state => {
+const mapStateToProps = ({ publish }) => {
   return {
-    thumbnail: state.metadata.thumbnail,
+    thumbnail: publish.metadata.thumbnail,
   };
 };
 

react/containers/PublishTitleInput/index.js

@@ -1,10 +1,10 @@
 import {connect} from 'react-redux';
-import {updateMetadata} from 'actions';
+import {updateMetadata} from 'actions/publish';
 import View from './view';
 
-const mapStateToProps = state => {
+const mapStateToProps = ({ publish }) => {
   return {
-    title: state.metadata.title,
+    title: publish.metadata.title,
   };
 };
 

react/containers/PublishTool/index.js

@@ -1,11 +1,11 @@
 import {connect} from 'react-redux';
 import View from './view';
 
-const mapStateToProps = state => {
+const mapStateToProps = ({ publish }) => {
   return {
-    file   : state.file,
-    status : state.status.status,
-    message: state.status.message,
+    file   : publish.file,
+    status : publish.status.status,
+    message: publish.status.message,
   };
 };
 

react/containers/PublishUrlInput/index.js

@@ -1,15 +1,15 @@
-import {updateClaim, updateError} from 'actions';
+import {updateClaim, updateError} from 'actions/publish';
 import {connect} from 'react-redux';
 import View from './view';
 
-const mapStateToProps = state => {
+const mapStateToProps = ({ channel, publish }) => {
   return {
-    fileName              : state.file.name,
-    loggedInChannelName   : state.loggedInChannel.name,
-    loggedInChannelShortId: state.loggedInChannel.shortId,
-    publishInChannel      : state.publishInChannel,
-    claim                 : state.claim,
-    urlError              : state.error.url,
+    loggedInChannelName   : channel.loggedInChannel.name,
+    loggedInChannelShortId: channel.loggedInChannel.shortId,
+    fileName              : publish.file.name,
+    publishInChannel      : publish.publishInChannel,
+    claim                 : publish.claim,
+    urlError              : publish.error.url,
   };
 };
 

react/reducers/channel.js

@@ -0,0 +1,28 @@
+import * as actions from 'constants/action_types';
+
+const initialState = {
+  loggedInChannel: {
+    name   : null,
+    shortId: null,
+    longId : null,
+  },
+};
+
+/*
+Reducers describe how the application's state changes in response to actions
+*/
+
+export default function (state = initialState, action) {
+  switch (action.type) {
+    case actions.CHANNEL_UPDATE:
+      return Object.assign({}, state, {
+        loggedInChannel: {
+          name   : action.name,
+          shortId: action.shortId,
+          longId : action.longId,
+        },
+      });
+    default:
+      return state;
+  }
+}

react/reducers/index.js

@@ -1,80 +1,8 @@
-import * as actions from 'constants/action_types';
+import { combineReducers } from 'redux';
+import PublishReducer from 'reducers/publish';
+import ChannelReducer from 'reducers/channel';
 
-const initialState = {
-  loggedInChannel: {
-    name   : null,
-    shortId: null,
-    longId : null,
-  },
-  publishInChannel: false,
-  status          : {
-    status : null,
-    message: null,
-  },
-  error: {
-    file         : null,
-    url          : null,
-    publishSubmit: null,
-  },
-  file    : null,
-  claim   : '',
-  metadata: {
-    title      : '',
-    thumbnail  : '',
-    description: '',
-    license    : '',
-    nsfw       : false,
-  },
-};
-
-/*
-Reducers describe how the application's state changes in response to actions
-*/
-
-export default function (state = initialState, action) {
-  switch (action.type) {
-    case actions.FILE_SELECTED:
-      return Object.assign({}, state, {
-        file: action.file,
-      });
-    case actions.FILE_CLEAR:
-      return initialState;
-    case actions.METADATA_UPDATE:
-      return Object.assign({}, state, {
-        metadata: Object.assign({}, state.metadata, {
-          [action.name]: action.value,
-        }),
-      });
-    case actions.CLAIM_UPDATE:
-      return Object.assign({}, state, {
-        claim: action.value,
-      });
-    case actions.CHANNEL_UPDATE:
-      return Object.assign({}, state, {
-        loggedInChannel: {
-          name   : action.name,
-          shortId: action.shortId,
-          longId : action.longId,
-        },
-      });
-    case actions.SET_PUBLISH_IN_CHANNEL:
-      return Object.assign({}, state, {
-        publishInChannel: action.channel,
-      });
-    case actions.PUBLISH_STATUS_UPDATE:
-      return Object.assign({}, state, {
-        status: Object.assign({}, state.status, {
-          status : action.status,
-          message: action.message,
-        }),
-      });
-    case actions.ERROR_UPDATE:
-      return Object.assign({}, state, {
-        error: Object.assign({}, state.error, {
-          [action.name]: action.value,
-        }),
-      });
-    default:
-      return state;
-  }
-}
+export default combineReducers({
+  channel: ChannelReducer,
+  publish: PublishReducer,
+});

react/reducers/publish.js

@@ -0,0 +1,67 @@
+import * as actions from 'constants/action_types';
+
+const initialState = {
+  publishInChannel: false,
+  status          : {
+    status : null,
+    message: null,
+  },
+  error: {
+    file         : null,
+    url          : null,
+    publishSubmit: null,
+  },
+  file    : null,
+  claim   : '',
+  metadata: {
+    title      : '',
+    thumbnail  : '',
+    description: '',
+    license    : '',
+    nsfw       : false,
+  },
+};
+
+/*
+Reducers describe how the application's state changes in response to actions
+*/
+
+export default function (state = initialState, action) {
+  switch (action.type) {
+    case actions.FILE_SELECTED:
+      return Object.assign({}, state, {
+        file: action.file,
+      });
+    case actions.FILE_CLEAR:
+      return initialState;
+    case actions.METADATA_UPDATE:
+      return Object.assign({}, state, {
+        metadata: Object.assign({}, state.metadata, {
+          [action.name]: action.value,
+        }),
+      });
+    case actions.CLAIM_UPDATE:
+      return Object.assign({}, state, {
+        claim: action.value,
+      });
+    case actions.SET_PUBLISH_IN_CHANNEL:
+      return Object.assign({}, state, {
+        publishInChannel: action.channel,
+      });
+    case actions.PUBLISH_STATUS_UPDATE:
+      return Object.assign({}, state, {
+        status: Object.assign({}, state.status, {
+          status : action.status,
+          message: action.message,
+        }),
+      });
+    case actions.ERROR_UPDATE:
+      return Object.assign({}, state, {
+        error: Object.assign({}, state.error, {
+          [action.name]: action.value,
+        }),
+      });
+    default:
+      return state;
+  }
+}

webpack.config.js

@@ -3,7 +3,7 @@ const Path = require('path');
 const REACT_ROOT = Path.resolve(__dirname, 'react/');
 
 module.exports = {
-  entry : './react/index.js',
+  entry : './react/app.js',
   output: {
     path    : Path.join(__dirname, '/public/bundle/'),
     filename: 'bundle.js',