├── .eslintrc ├── .gitignore ├── .npmignore ├── README.md ├── package.json └── source └── index.js /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "parser": "babel-eslint", 3 | "env": { 4 | "browser": true, 5 | "node": true, 6 | "es6": true 7 | }, 8 | "ecmaFeatures": { 9 | "modules": true, 10 | }, 11 | "rules": { 12 | "comma-dangle": [2, "always-multiline"], 13 | "no-cond-assign": 2, 14 | "no-extra-semi": 2, 15 | "no-constant-condition": 1, 16 | "no-console": 1, 17 | "no-dupe-args": 2, 18 | "no-dupe-keys": 2, 19 | "no-duplicate-case": 2, 20 | "no-empty": 2, 21 | "no-func-assign": 2, 22 | "no-irregular-whitespace": 2, 23 | "no-sparse-arrays": 2, 24 | "curly": [1, "multi-line"], 25 | "dot-location": [2, "property"], 26 | "eqeqeq": [2, "smart"], 27 | "no-eval": 2, 28 | "no-extend-native": 2, 29 | "no-fallthrough": 1, 30 | "no-invalid-this": 2, 31 | "no-labels": 1, 32 | "no-lone-blocks": 2, 33 | "no-undef": 2, 34 | "no-undefined": 2, 35 | "no-unused-vars": [2, {"varsIgnorePattern": "^style$"}], 36 | "no-use-before-define": 2, 37 | "array-bracket-spacing": [2, "never"], 38 | "brace-style": [2, "stroustrup"], 39 | "no-multiple-empty-lines": [2, {"max": 1}], 40 | "no-trailing-spaces": 2, 41 | "no-underscore-dangle": 2, 42 | "no-unneeded-ternary": 1, 43 | "no-mixed-spaces-and-tabs": 2, 44 | "comma-spacing": [2, {"before": false, "after": true}], 45 | "block-spacing": 2, 46 | "semi": [2, "always"], 47 | "object-curly-spacing": [2, "always"], 48 | "arrow-parens": [2, "always"], 49 | "arrow-spacing": 2, 50 | "no-const-assign": 2, 51 | "no-dupe-class-members": 2, 52 | "no-var": 2, 53 | "object-shorthand": 2, 54 | "prefer-arrow-callback": 2, 55 | "prefer-const": 2, 56 | "prefer-spread": 2, 57 | "prefer-template": 2 58 | } 59 | } 60 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | lib 3 | -------------------------------------------------------------------------------- /.npmignore: -------------------------------------------------------------------------------- 1 | source 2 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # [DEPRECATED] Redux WebSockets 2 | 3 | **Use [redux-thunk](https://www.github.com/gaearon/redux-thunk) instead. Since v2.1.0 [identical functionality](https://www.github.com/gaearon/redux-thunk#injecting-a-custom-argument) can be achieved with that package.** 4 | 5 | [This article](https://medium.com/@gethylgeorge/using-socket-io-in-react-redux-app-to-handle-real-time-data-c0e734297795) outlines an example of how to use redux-thunk with WebSockets. The implementation can be found in a Github repo, starting on [this file](https://github.com/Gethyl/RealTimeTodo/blob/master/src/js/components/Layout.js). The example uses socket.io, but using web sockets directly should be similar. 6 | 7 | --- 8 | 9 | [![npm version](https://img.shields.io/npm/v/redux-ws.svg?style=flat-square)](https://www.npmjs.com/package/redux-ws) 10 | 11 | WebSockets middleware for [Redux](http://rackt.github.io/redux). If you ever used [Redux Thunk](https://github.com/gaearon/redux-thunk) you already know how to use this. 12 | 13 | ## What Does it Do? 14 | 15 | Redux WebSockets exposes a socket connection to any action creator that returns a function instead of a plain object. This way you can easily 'reach' your long-living socket from any thunk that goes through Redux. 16 | 17 | ## Usage 18 | 19 | Write action creators that return functions instead of objects. Those functions will be immediately called with an object containing the socket, dispatch, and getState as the argument. 20 | 21 | _Note that this is a bit different from Redux Thunk — you get passed on object, not dispatch/getState/socket directly. This is done to make it easier to reach either of them, without having to 'walk over' the parameters every time. I highly recommend using destructuring to get to the right parts of the object. See below._ 22 | 23 | ```js 24 | // An action creator returns a function that gets passed an object containing 25 | // the socket, dispatch, and getState as an argument. I am using ES2015 26 | // destructuring to take socket and dispatch from this object and 27 | // subsequently use it. 28 | function subscribeToUpdates() { 29 | return ({ socket, dispatch }) => { 30 | socket.on('update', dispatch(reactToUpdate())); 31 | }; 32 | } 33 | 34 | // Regular Redux action creator... 35 | function reactToUpdate() {...} 36 | 37 | ``` 38 | 39 | ## Installation 40 | 41 | Install from npm. 42 | 43 | ```bash 44 | npm install --save redux-ws 45 | ``` 46 | 47 | Instantiate, pass the middleware creator your socket, and add to your middleware stack. 48 | 49 | ```js 50 | import { createStore, applyMiddleware } from 'redux'; 51 | import createSocketMiddleware from 'redux-ws'; 52 | import io from 'socket.io-client'; 53 | import reducer from './reducers/index'; 54 | 55 | const socketMiddleware = createSocketMiddleware(io('http://example.com/socket')); 56 | 57 | const store = createStore( 58 | reducer, 59 | applyMiddleware(socketMiddleware) 60 | ); 61 | 62 | // Now just write your actions... 63 | 64 | ``` 65 | 66 | _The above example uses socket.io, but I don't see any reason this middleware couldn't be used with other WebSockets libraries — all it does is exposes your socket process to thunks. Check out the source._ 67 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-ws", 3 | "version": "0.2.0", 4 | "description": "Redux middleware for WebSockets communication.", 5 | "main": "lib/index.js", 6 | "scripts": { 7 | "build": "rm -rf lib/ && ./node_modules/.bin/babel -d lib/ source/", 8 | "prepublish": "npm run build", 9 | "test": "echo \"Error: no test specified\" && exit 1" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/luskhq/redux-ws.git" 14 | }, 15 | "keywords": [ 16 | "redux", 17 | "middleware", 18 | "websockets", 19 | "socket.io" 20 | ], 21 | "author": "Artur Muller (http://arturmuller.com)", 22 | "license": "ISC", 23 | "bugs": { 24 | "url": "https://github.com/luskhq/redux-ws/issues" 25 | }, 26 | "homepage": "https://github.com/luskhq/redux-ws#readme", 27 | "devDependencies": { 28 | "babel": "^5.8.23", 29 | "babel-eslint": "^4.1.3", 30 | "eslint": "^1.7.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /source/index.js: -------------------------------------------------------------------------------- 1 | export default function createSocketMiddleware(socket) { 2 | 3 | return ({ dispatch, getState }) => (next) => (action) => { 4 | if (typeof action === 'function') { 5 | return action({ dispatch, socket, getState }); 6 | } 7 | 8 | return next(action); 9 | 10 | }; 11 | } 12 | --------------------------------------------------------------------------------