diff --git a/package.json b/package.json
index 9db3c20..f9db54d 100644
--- a/package.json
+++ b/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"
}
}
diff --git a/src/components/App.js b/src/components/App.js
index ac92d7e..5a25e7f 100644
--- a/src/components/App.js
+++ b/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 {
Calls Application
-
+
-
+
diff --git a/src/components/Call.js b/src/components/Call.js
index 10e48ce..3e1c146 100644
--- a/src/components/Call.js
+++ b/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() {
diff --git a/src/components/CallList.js b/src/components/CallList.js
index 4d2d0ef..50c510b 100644
--- a/src/components/CallList.js
+++ b/src/components/CallList.js
@@ -10,15 +10,15 @@ 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 = () => {
@@ -26,7 +26,7 @@ export class CallList extends Component {
return
});
};
diff --git a/src/components/TextMessageList.js b/src/components/TextMessageList.js
index f598e8a..1d8d7a7 100644
--- a/src/components/TextMessageList.js
+++ b/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
+ return
});
};
diff --git a/src/flux.js b/src/flux.js
deleted file mode 100644
index c86cca4..0000000
--- a/src/flux.js
+++ /dev/null
@@ -1,83 +0,0 @@
-import { API } from 'application/api';
-import Fluxxor from 'fluxxor';
-
-let constants = {
- DRAFT_TEXT: "ADD_DRAFT_TEXT_MESSAGE",
- FETCH_CALLS: "SUCCESFULLY_FETCHED_CALLS",
- FETCH_MESSAGES: "SUCCESFULLY_FETCHED_MESSAGES"
-};
-
-var CallStore = Fluxxor.createStore({
- initialize() {
- this.calls = [];
-
- this.bindActions(
- constants.FETCH_CALLS, this.onCallsFetched
- );
- },
-
- getCalls() {
- return this.calls
- },
-
- onCallsFetched(calls) {
- this.calls = calls;
- this.emit('change');
- }
-});
-
-var MessageStore = Fluxxor.createStore({
- initialize() {
- this.messages = [];
-
- this.bindActions(
- constants.FETCH_MESSAGES, this.onMessagesFetched,
- constants.DRAFT_TEXT, this.onDraftText
- );
- },
-
- getMessages() {
- return this.messages
- },
-
- onMessagesFetched(messages) {
- this.messages = messages;
- this.emit('change');
- },
-
- onDraftText(textInfo) {
- this.messages.push({
- id: this.messages.length + 1,
- from: textInfo.from,
- number: textInfo.number,
- status: "draft"
- });
-
- this.emit('change');
- }
-});
-
-
-let actions = {
- addText(textInfo) {
- // example of error checking
- if ( textInfo.from ) {
- this.dispatch(constants.DRAFT_TEXT, textInfo)
- }
- },
-
- fetchCalls() {
- var result = API.getCalls();
- this.dispatch(constants.FETCH_CALLS, result);
- },
-
- fetchMessages() {
- var result = API.getMessages();
- this.dispatch(constants.FETCH_MESSAGES, result);
- }
-}
-
-export var flux = new Fluxxor.Flux({
- MessageStore: new MessageStore(),
- CallStore: new CallStore()
-}, actions);
diff --git a/src/index.js b/src/index.js
index 5026c95..a381366 100644
--- a/src/index.js
+++ b/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(, document.getElementById('root'));
+render(, document.getElementById('root'));
diff --git a/src/myRedux/actions.js b/src/myRedux/actions.js
new file mode 100644
index 0000000..f491a14
--- /dev/null
+++ b/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()
+ }
+}
diff --git a/src/myRedux/reducers.js b/src/myRedux/reducers.js
new file mode 100644
index 0000000..920c691
--- /dev/null
+++ b/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;
diff --git a/src/myRedux/store.js b/src/myRedux/store.js
new file mode 100644
index 0000000..94c0d43
--- /dev/null
+++ b/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
diff --git a/webpack.config.dev.js b/webpack.config.dev.js
index ee3e197..d266c87 100644
--- a/webpack.config.dev.js
+++ b/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']
},