From 8b19a2f5bb5fc49234dd6bab44800891a0899e85 Mon Sep 17 00:00:00 2001 From: Titouan Rigoudy Date: Fri, 11 Mar 2016 09:25:26 +0100 Subject: [PATCH] Add redux-thunk. --- package.json | 3 ++- src/actions/socketHandlerActions.js | 2 +- src/components/ConnectForm.js | 8 ++++---- src/components/SolsticeApp.js | 2 +- src/store/configureStore.dev.js | 14 ++++++++------ src/store/configureStore.js | 10 ++++++++-- src/store/configureStore.prod.js | 4 ++-- src/utils/ControlMessage.js | 9 --------- src/utils/ControlRequest.js | 11 +++++++++++ 9 files changed, 37 insertions(+), 26 deletions(-) delete mode 100644 src/utils/ControlMessage.js create mode 100644 src/utils/ControlRequest.js diff --git a/package.json b/package.json index 1ae2ea4..15a2e25 100644 --- a/package.json +++ b/package.json @@ -24,7 +24,8 @@ "react-dom": "0.14.7", "react-redux": "4.4.0", "redux": "3.3.1", - "redux-form": "~4.2.0" + "redux-form": "~4.2.0", + "redux-thunk": "~2.0.1" }, "devDependencies": { "babel-cli": "6.5.1", diff --git a/src/actions/socketHandlerActions.js b/src/actions/socketHandlerActions.js index 005f442..2bccdaa 100644 --- a/src/actions/socketHandlerActions.js +++ b/src/actions/socketHandlerActions.js @@ -17,7 +17,7 @@ export default { type: SOCKET_SET_ERROR }), - onopen: event => ({ + onopen: event => (dispatch, getState) => ({ type: SOCKET_SET_OPEN }), diff --git a/src/components/ConnectForm.js b/src/components/ConnectForm.js index bc35c25..2b8d2f6 100644 --- a/src/components/ConnectForm.js +++ b/src/components/ConnectForm.js @@ -2,12 +2,12 @@ import React, {PropTypes} from "react"; import {reduxForm} from "redux-form"; import { STATE_CLOSED } from "../constants/socket"; - +import ControlRequest from "../utils/ControlRequest"; const ConnectForm = (props) => { - const { fields: { url }, handleSubmit, socket, socketOpen } = props; + const { fields: { url }, handleSubmit, socket, socketActions } = props; const submit = (values, dispatch) => { - dispatch(socketOpen(values.url)); + dispatch(socketActions.open(values.url)); }; return (
@@ -24,7 +24,7 @@ ConnectForm.propTypes = { fields: PropTypes.object.isRequired, handleSubmit: PropTypes.func.isRequired, socket: PropTypes.object.isRequired, - socketOpen: PropTypes.func.isRequired + socketActions: PropTypes.object.isRequired }; export default reduxForm({ diff --git a/src/components/SolsticeApp.js b/src/components/SolsticeApp.js index c33cd88..22b65b6 100644 --- a/src/components/SolsticeApp.js +++ b/src/components/SolsticeApp.js @@ -11,7 +11,7 @@ const SolsticeApp = (props) => { return (
+ socketActions={actions.socketActions}/>
); diff --git a/src/store/configureStore.dev.js b/src/store/configureStore.dev.js index 3803efa..3fa7e64 100644 --- a/src/store/configureStore.dev.js +++ b/src/store/configureStore.dev.js @@ -2,17 +2,19 @@ //This boilerplate file is likely to be the same for each project that uses Redux. //With Redux, the actual stores are in /reducers. -import { createStore } from 'redux'; -import rootReducer from '../reducers'; +import { createStore } from "redux"; +import rootReducer from "../reducers"; -export default function configureStore(initialState) { - let store; +export default function configureStore(initialState, enhancer) { + let createStoreModded; if (window.devToolsExtension) { //Enable Redux devtools if the extension is installed in developer's browser - store = window.devToolsExtension()(createStore)(rootReducer, initialState); + createStoreModded = window.devToolsExtension()(createStore); } else { - store = createStore(rootReducer, initialState); + createStoreModded = createStore; } + const store = createStoreModded(rootReducer, initialState, enhancer); + if (module.hot) { // Enable Webpack hot module replacement for reducers module.hot.accept('../reducers', () => { diff --git a/src/store/configureStore.js b/src/store/configureStore.js index 78c9ea1..540c6f1 100644 --- a/src/store/configureStore.js +++ b/src/store/configureStore.js @@ -1,5 +1,11 @@ +import { applyMiddleware } from "redux"; +import thunk from "redux-thunk"; + +let configureStore; if (process.env.NODE_ENV === 'production') { - module.exports = require('./configureStore.prod'); + configureStore = require('./configureStore.prod').default; } else { - module.exports = require('./configureStore.dev'); + configureStore = require('./configureStore.dev').default; } + +export default () => configureStore(undefined, applyMiddleware(thunk)); diff --git a/src/store/configureStore.prod.js b/src/store/configureStore.prod.js index 2872f85..8d28853 100644 --- a/src/store/configureStore.prod.js +++ b/src/store/configureStore.prod.js @@ -1,6 +1,6 @@ import { createStore } from 'redux'; import rootReducer from '../reducers'; -export default function configureStore(initialState) { - return createStore(rootReducer, initialState); +export default function configureStore(initialState, enhancer) { + return createStore(rootReducer, initialState, enhancer); } diff --git a/src/utils/ControlMessage.js b/src/utils/ControlMessage.js deleted file mode 100644 index a16fcac..0000000 --- a/src/utils/ControlMessage.js +++ /dev/null @@ -1,9 +0,0 @@ -export default { - login: (username, password) => ({ - "variant": "LoginRequest", - "fields": [{ - "username": username, - "password": password, - }] - }) -}; diff --git a/src/utils/ControlRequest.js b/src/utils/ControlRequest.js new file mode 100644 index 0000000..d377fe7 --- /dev/null +++ b/src/utils/ControlRequest.js @@ -0,0 +1,11 @@ +export default { + loginStatus: () => ({ + "variant": "LoginStatusRequest", + "fields": [] + }), + + roomList: () => ({ + "variant": "RoomListRequest", + "fields": [] + }) +};