Merge pull request #3 from droberts84/feature/redux

Redux Example

package.json

@@ -47,16 +47,17 @@
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.13.3",
     "json-loader": "^0.5.4",
+    "redux-devtools": "^3.0.1",
     "rimraf": "^2.4.3",
     "webpack": "^1.12.9",
     "webpack-dev-middleware": "^1.4.0",
     "webpack-hot-middleware": "^2.6.0"
   },
   "dependencies": {
-    "fluxxor": "^1.7.3",
     "lodash": "^4.0.0",
     "react": "^0.14.3",
     "react-bootstrap": "^0.28.2",
-    "react-dom": "^0.14.3"
+    "react-dom": "^0.14.3",
+    "redux": "^3.0.5"
   }
 }

src/components/App.js

@@ -2,12 +2,14 @@ import React, { Component } from 'react';
 import { CallList } from 'components/CallList';
 import { TextMessageList } from 'components/TextMessageList';
 import { Grid, Row, Col } from 'react-bootstrap';
+import { fetchCalls, fetchMessages } from 'myRedux/actions';
 
 export class App extends Component {
 
   componentDidMount() {
-    this.props.flux.actions.fetchCalls();
-    this.props.flux.actions.fetchMessages();
+    var store = this.props.store;
+    store.dispatch(fetchCalls());
+    store.dispatch(fetchMessages());
   }
 
   render() {
@@ -16,10 +18,10 @@ export class App extends Component {
         <h1> Calls Application </h1>
         <Row>
           <Col xs={3}>
-            <CallList flux={this.props.flux} />
+            <CallList store={this.props.store} />
           </Col>
           <Col xs={8}>
-            <TextMessageList flux={this.props.flux} />
+            <TextMessageList store={this.props.store} />
           </Col>
         </Row>
       </Grid>

src/components/Call.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import { ListGroupItem, Button, Row, Col } from 'react-bootstrap';
 import { Icon } from 'components/Icon';
+import { addText } from 'myRedux/actions';
 
 export class Call extends Component {
 
   textBack = () => {
-    this.props.flux.actions.addText(this.props);
+    this.props.store.dispatch(addText(this.props));
   };
 
   render() {

src/components/CallList.js

@@ -10,23 +10,23 @@ export class CallList extends Component {
   }
 
   componentDidMount() {
-    this.props.flux.store('CallStore').on('change', this.updateCalls)
+    this.unsubscribe = this.props.store.subscribe(this.updateCalls);
   }
 
   componentWillUnmount() {
-    this.props.flux.store('CallStore').removeListener('change', this.updateCalls);
+    this.unsubscribe();
   }
 
   updateCalls = () => {
-    this.setState({ calls: this.props.flux.store('CallStore').getCalls() });
+    this.setState({ calls: this.props.store.getState().calls });
   };
 
   callNodes = () => {
     return this.state.calls.map((call) => {
       return <Call
         {...call}
         key={call.id}
-        flux={this.props.flux}
+        store={this.props.store}
        />
     });
   };

src/components/TextMessageList.js

@@ -10,20 +10,20 @@ export class TextMessageList extends Component {
   }
 
   componentDidMount() {
-    this.props.flux.store('MessageStore').on('change', this.updateMessages)
+    this.unsubscribe = this.props.store.subscribe(this.updateMessages);
   }
 
   componentWillUnmount() {
-    this.props.flux.store('MessageStore').removeListener('change', this.updateMessages);
+    this.unsubscribe();
   }
 
   updateMessages = () => {
-    this.setState({ messages: this.props.flux.store('MessageStore').getMessages() });
+    this.setState({ messages: this.props.store.getState().messages });
   };
 
   messageNodes = () => {
     return this.state.messages.map( (message) => {
-      return <TextMessage key={message.id} {...message} flux={this.props.flux} />
+      return <TextMessage key={message.id} {...message} store={this.props.store} />
     });
   };
 

src/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render } from 'react-dom';
 import { App } from 'components/App';
-import { flux } from 'application/flux'
+import store from 'myRedux/store';
 
-render(<App flux={flux} />, document.getElementById('root'));
+render(<App store={store} />, document.getElementById('root'));

src/myRedux/actions.js

@@ -0,0 +1,27 @@
+import { API } from 'application/api';
+
+// action creators
+export function addText(textInfo) {
+  // example of error checking
+  if ( textInfo.from ) {
+    return Object.assign({}, textInfo, { type: 'DRAFT_TEXT'} )
+  } else {
+    return {}
+  }
+}
+
+export function fetchCalls() {
+  // not making async for simplicity
+  return {
+    type: 'FETCH_CALLS',
+    calls: API.getCalls()
+  }
+}
+
+export function fetchMessages() {
+  // not making async for simplicity
+  return {
+    type: 'FETCH_MESSAGES',
+    messages: API.getMessages()
+  }
+}

src/myRedux/reducers.js

@@ -0,0 +1,45 @@
+import { combineReducers } from 'redux';
+
+// sub reducer
+function messages(state = [], action) {
+  switch(action.type) {
+  case 'DRAFT_TEXT':
+    return  state.concat([{
+        id: state.length + 1,
+        from: action.from,
+        number: action.number,
+        status: "draft"
+    }]);
+  case 'FETCH_MESSAGES':
+    return action.messages
+  default:
+    return state
+  }
+}
+
+// sub reducer
+function calls(state = [], action) {
+  switch(action.type) {
+  case 'FETCH_CALLS':
+    return action.calls
+  default:
+    return state
+  }
+}
+
+// the  main reducer
+// it will return a new state based on the state and action
+// it does not mutate
+// this is a shorcut for
+// function communcationsApp(state = {}, action) {
+//   return {
+//     messages: messages(state.messages, action),
+//     calls: calls(state.calls, action)
+//   }
+// }
+const communcationsApp = combineReducers({
+  messages,
+  calls
+});
+
+export default communcationsApp;

src/myRedux/store.js

@@ -0,0 +1,10 @@
+import { createStore } from 'redux';
+import communcationsApp from 'myRedux/reducers'
+
+let store = createStore(communcationsApp);
+
+store.subscribe(() =>
+  console.log("Current state is : ", store.getState())
+);
+
+export default store

webpack.config.dev.js

@@ -17,7 +17,8 @@ module.exports = {
   resolve: {
     alias: {
       components: path.join(__dirname, 'src', 'components'),
-      application: path.join(__dirname, 'src')
+      application: path.join(__dirname, 'src'),
+      myRedux: path.join(__dirname, 'src', 'myRedux')
     },
     extensions: ['', '.js', '.jsx', '.json']
   },