├── .nvmrc ├── .gitignore ├── .babelrc ├── .travis.yml ├── lib ├── index.js ├── connect.js └── create-provider.js ├── .mversionrc ├── test ├── setup.js └── index.js ├── LICENSE ├── CONTRIBUTING.md ├── CODE_OF_CONDUCT.md ├── package.json └── README.md /.nvmrc: -------------------------------------------------------------------------------- 1 | 4 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | dist 4 | -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["transform-runtime"], 3 | "presets": [ "es2015", "react" ] 4 | } 5 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "4" 4 | script: 5 | - npm run lint 6 | - npm test -------------------------------------------------------------------------------- /lib/index.js: -------------------------------------------------------------------------------- 1 | export { default as connect } from './connect' 2 | export { default as createProvider } from './create-provider' 3 | -------------------------------------------------------------------------------- /.mversionrc: -------------------------------------------------------------------------------- 1 | { 2 | "commitMessage": "Bumps to version v%s", 3 | "tagName": "v%s", 4 | "scripts": { 5 | "preupdate": "npm run lint && npm test && npm run dist", 6 | "postcommit": "git push && git push --tags && npm publish", 7 | "postupdate": "echo 'New version v%s tagged and released'" 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /test/setup.js: -------------------------------------------------------------------------------- 1 | import { jsdom } from 'jsdom' 2 | 3 | global.document = jsdom('') 4 | global.window = document.defaultView 5 | 6 | for (const property in global.window) { 7 | if (!(property in global)) { 8 | global[property] = global.window[property] 9 | } 10 | } 11 | 12 | global.navigator = { userAgent: 'Node.js' } 13 | -------------------------------------------------------------------------------- /lib/connect.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes } from 'react' 2 | import { connect } from 'react-redux' 3 | 4 | export default (...args) => (Component, storeName = 'store') => { 5 | // Return the "normal" connected component from `react-redux`. 6 | // Then wrap it and pass the store with the custom name as a `prop`, 7 | // after picking it from `context`. 8 | const ConnectedComponent = connect(...args)(Component) 9 | 10 | const Wrapper = (props, context) => ( 11 | 12 | ) 13 | 14 | Wrapper.displayName = `WrappedConnect(${ConnectedComponent.displayName})` 15 | Wrapper.contextTypes = { 16 | [storeName]: PropTypes.object, 17 | } 18 | 19 | return Wrapper 20 | } 21 | 22 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2016 Nicola Molinari 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Contributing 2 | 3 | We are open to, and grateful for, any contributions made by the community. By contributing to this project, you agree to abide by the [code of conduct](CODE_OF_CONDUCT.md). 4 | 5 | 6 | ## Development 7 | 8 | Fork, then clone the repo: 9 | 10 | ```bash 11 | git clone https://github.com/your-username/react-redux-custom-store.git 12 | ``` 13 | 14 | Install the dependencies and make sure the tests pass: 15 | 16 | ```bash 17 | npm install 18 | npm test 19 | 20 | # lint your code 21 | npm run lint 22 | ``` 23 | 24 | 25 | ## Submitting Changes 26 | 27 | * Open a new issue in the [Issue tracker](https://github.com/emmenko/react-redux-custom-store/issues). 28 | * Fork the repo. 29 | * Create a new feature branch based off the `master` branch. 30 | * Make sure all tests pass and there are no linting errors. 31 | * Submit a pull request, referencing any issues it addresses. 32 | 33 | Please try to keep your pull request focused in scope and avoid including unrelated commits. 34 | 35 | After you have submitted your pull request, we'll try to get back to you as soon as possible. We may suggest some changes or improvements. 36 | 37 | Thank you for contributing! 38 | -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Code of Conduct 2 | 3 | As contributors and maintainers of this project, we pledge to respect all people who contribute through reporting issues, posting feature requests, updating documentation, submitting pull requests or patches, and other activities. 4 | 5 | We are committed to making participation in this project a harassment-free experience for everyone, regardless of level of experience, gender, gender identity and expression, sexual orientation, disability, personal appearance, body size, race, age, or religion. 6 | 7 | Examples of unacceptable behavior by participants include the use of sexual language or imagery, derogatory comments or personal attacks, trolling, public or private harassment, insults, or other unprofessional conduct. 8 | 9 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct. Project maintainers who do not follow the Code of Conduct may be removed from the project team. 10 | 11 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by opening an issue or contacting one or more of the project maintainers. 12 | 13 | This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.0.0, available at [http://contributor-covenant.org/version/1/0/0/](http://contributor-covenant.org/version/1/0/0/) 14 | -------------------------------------------------------------------------------- /lib/create-provider.js: -------------------------------------------------------------------------------- 1 | /* 2 | Note: this is copied from `react-redux/Provider`. 3 | The only difference is the wrapping function and the name 4 | of the context property. 5 | */ 6 | import { Component, PropTypes, Children } from 'react' 7 | 8 | const storeShape = PropTypes.shape({ 9 | subscribe: PropTypes.func.isRequired, 10 | dispatch: PropTypes.func.isRequired, 11 | getState: PropTypes.func.isRequired, 12 | }) 13 | 14 | export default function createProvider (storeName = 'store') { 15 | let didWarnAboutReceivingStore = false 16 | function warnAboutReceivingStore () { 17 | if (didWarnAboutReceivingStore) { 18 | return 19 | } 20 | didWarnAboutReceivingStore = true 21 | 22 | /* eslint-disable no-console */ 23 | if (typeof console !== 'undefined' && typeof console.error === 'function') { 24 | console.error( 25 | ' does not support changing `store` on the fly. ' + 26 | 'It is most likely that you see this error because you updated to ' + 27 | 'Redux 2.x and React Redux 2.x which no longer hot reload reducers ' + 28 | 'automatically. See https://github.com/reactjs/react-redux/releases/' + 29 | 'tag/v2.0.0 for the migration instructions.' 30 | ) 31 | } 32 | /* eslint-disable no-console */ 33 | } 34 | 35 | class Provider extends Component { 36 | constructor (props, context) { 37 | super(props, context) 38 | this.store = props.store 39 | } 40 | 41 | getChildContext () { 42 | return { [storeName]: this.store } 43 | } 44 | 45 | render () { 46 | const { children } = this.props 47 | return Children.only(children) 48 | } 49 | } 50 | 51 | if (process.env.NODE_ENV !== 'production') { 52 | Provider.prototype.componentWillReceiveProps = function (nextProps) { 53 | const { store } = this 54 | const { store: nextStore } = nextProps 55 | 56 | if (store !== nextStore) { 57 | warnAboutReceivingStore() 58 | } 59 | } 60 | } 61 | 62 | Provider.propTypes = { 63 | store: storeShape.isRequired, 64 | children: PropTypes.element.isRequired, 65 | } 66 | Provider.childContextTypes = { 67 | [storeName]: storeShape.isRequired, 68 | } 69 | 70 | return Provider 71 | } 72 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-redux-custom-store", 3 | "version": "1.0.0", 4 | "description": "Simple wrapper around react-redux to allow configuring and using connect with a custom store name.", 5 | "homepage": "https://github.com/emmenko/react-redux-custom-store", 6 | "author": "Nicola Molinari ", 7 | "license": "MIT", 8 | "main": "dist", 9 | "scripts": { 10 | "dist": "rimraf dist && babel lib --out-dir dist", 11 | "lint": "eslint lib test", 12 | "release": "mversion patch -m", 13 | "release:patch": "mversion patch -m", 14 | "release:minor": "mversion minor -m", 15 | "release:major": "mversion major -m", 16 | "test": "NODE_ENV=test babel-node test/index.js | tap-spec", 17 | "test:watch": "watch 'npm test' lib test -d" 18 | }, 19 | "peerDependencies": { 20 | "react": ">=0.14", 21 | "react-redux": ">=4" 22 | }, 23 | "devDependencies": { 24 | "babel-cli": "^6.6.5", 25 | "babel-core": "^6.6.5", 26 | "babel-eslint": "^5.0.0", 27 | "babel-plugin-transform-runtime": "^6.6.0", 28 | "babel-polyfill": "^6.6.1", 29 | "babel-preset-es2015": "^6.6.0", 30 | "babel-preset-react": "^6.5.0", 31 | "babel-runtime": "^6.6.1", 32 | "cz-conventional-changelog": "1.1.5", 33 | "enzyme": "^2.0.0", 34 | "eslint": "^2.2.0", 35 | "eslint-config-airbnb": "^6.2.0", 36 | "eslint-plugin-react": "^4.1.0", 37 | "jsdom": "^8.1.0", 38 | "mversion": "^1.10.1", 39 | "react": "^0.14.7", 40 | "react-addons-test-utils": "^0.14.7", 41 | "react-dom": "^0.14.7", 42 | "react-redux": "^4.4.1", 43 | "redux": "^3.3.1", 44 | "rimraf": "^2.5.2", 45 | "tap-spec": "^4.1.1", 46 | "tape": "^4.5.0", 47 | "watch": "^0.17.1" 48 | }, 49 | "repository": { 50 | "type": "git", 51 | "url": "https://github.com/emmenko/react-redux-custom-store" 52 | }, 53 | "bugs": { 54 | "url": "https://github.com/emmenko/react-redux-custom-store/issues" 55 | }, 56 | "keywords": [ 57 | "react", 58 | "redux", 59 | "store", 60 | "custom", 61 | "nested" 62 | ], 63 | "engines": { 64 | "node": ">=4", 65 | "npm": ">=2" 66 | }, 67 | "eslintConfig": { 68 | "extends": "airbnb", 69 | "rules": { 70 | "semi": [ 2, "never" ], 71 | "space-before-function-paren": [ 2, "always" ] 72 | } 73 | }, 74 | "config": { 75 | "commitizen": { 76 | "path": "./node_modules/cz-conventional-changelog" 77 | } 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /test/index.js: -------------------------------------------------------------------------------- 1 | import './setup' 2 | import test from 'tape' 3 | import { mount } from 'enzyme' 4 | import React, { PropTypes } from 'react' 5 | import { createStore, combineReducers } from 'redux' 6 | import connect from '../lib/connect' 7 | import createProvider from '../lib/create-provider' 8 | 9 | const store = createStore(combineReducers({ 10 | user: (/* state, action */) => ({ name: 'John' }), 11 | })) 12 | 13 | test('Render component using custom store name', t => { 14 | const storeName = 'blog' 15 | const Provider = createProvider(storeName) 16 | const Foo = ({ name }) => ({name}) 17 | Foo.propTypes = { name: PropTypes.string } 18 | 19 | const Connected = connect( 20 | ({ user: { name } }) => ({ name }) 21 | )(Foo, storeName) 22 | 23 | const wrapper = mount( 24 | 25 | 26 | 27 | ) 28 | 29 | const wrapped = wrapper.find('WrappedConnect(Connect(Foo))') 30 | t.true(wrapped, 'find the wrapped connected component') 31 | t.true(storeName in wrapped.node.context, 'find custom store name in context') 32 | 33 | const connected = wrapper.find('Connect(Foo)') 34 | t.true(connected, 'find the connected component') 35 | t.true('store' in connected.props(), 'pass store as a prop to connect') 36 | 37 | const foo = wrapper.find(Foo) 38 | t.true(foo, 'find the Foo component') 39 | t.equal(foo.props().name, 'John', 'pick the user name from the custom store') 40 | 41 | t.end() 42 | }) 43 | 44 | test('Render nested providers', t => { 45 | const storeName = 'todo' 46 | const TodoProvider = createProvider(storeName) 47 | 48 | const todoStore = createStore(combineReducers({ 49 | todos: (/* state, action */) => [{ text: 'OK' }, { text: 'Missing' }], 50 | })) 51 | 52 | const TodoProfile = ({ name }) => (

{name}

) 53 | TodoProfile.propTypes = { name: PropTypes.string.isRequired } 54 | TodoProfile.contextTypes = { 55 | store: PropTypes.object, 56 | [storeName]: PropTypes.object, 57 | } 58 | 59 | const TodoList = ({ todos }) => ( 60 |
    61 | {todos.map(({ text }, i) => (
  • {text}
    • ))} 62 |
63 | ) 64 | TodoList.propTypes = { todos: PropTypes.array.isRequired } 65 | TodoList.contextTypes = { 66 | store: PropTypes.object, 67 | [storeName]: PropTypes.object, 68 | } 69 | 70 | const ConnectedTodoProfile = connect( 71 | ({ user: { name } }) => ({ name }) 72 | )(TodoProfile) // uses default store name `store` 73 | 74 | const ConnectedTodoList = connect( 75 | ({ todos }) => ({ todos }) 76 | )(TodoList, storeName) // uses custom store name `todo` 77 | 78 | const Todos = () => ( 79 |
80 | 81 | 82 |
83 | ) 84 | 85 | const TodosContainer = () => ( 86 | 87 | 88 | 89 | ) 90 | 91 | const Provider = createProvider() 92 | const Root = () => ( 93 | 94 | 95 | 96 | ) 97 | 98 | const wrapper = mount() 99 | 100 | t.comment('TodoProfile') 101 | const profile = wrapper.find('TodoProfile') 102 | t.true(profile, 'find the connected component for profile') 103 | t.true('store' in profile.node.context, 'find default store name in context') 104 | t.true(storeName in profile.node.context, 'find custom store name in context') 105 | t.equal(profile.text(), 'John') 106 | 107 | t.comment('TodoList') 108 | const list = wrapper.find('TodoList') 109 | t.true(list, 'find the connected component for profile') 110 | t.true('store' in list.node.context, 'find default store name in context') 111 | t.true(storeName in list.node.context, 'find custom store name in context') 112 | t.equal(list.find('li').at(0).text(), 'OK') 113 | t.equal(list.find('li').at(1).text(), 'Missing') 114 | 115 | t.end() 116 | }) 117 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

This repository is deprecated and not maintained anymore

2 | 3 | # React Redux (custom store) 4 | 5 | Simple wrapper around [react-redux](https://github.com/reactjs/react-redux). 6 | It allows to use different _nested_ `Provider`s by specifying a custom `store` name. 7 | 8 | [![build status](https://img.shields.io/travis/emmenko/react-redux-custom-store/master.svg?style=flat-square)](https://travis-ci.org/emmenko/react-redux-custom-store) [![npm version](https://img.shields.io/npm/v/react-redux-custom-store.svg?style=flat-square)](https://www.npmjs.com/package/react-redux-custom-store) 9 | 10 | ### Installation 11 | 12 | It requires **React 0.14 or later**, and **React Redux 4 or later** (those being `peerDependencies`). 13 | 14 | ```bash 15 | npm install --save react-redux-custom-store 16 | ``` 17 | 18 | ### Why? 19 | 20 | In _normal_ cases you **don't need this**. 21 | 22 | However, if your application _starts growing_ and you want to **decouple** it, e.g. in different modules, you may need to have different `Provider`s across the application. 23 | This could also be applied for things like _widgets_, with their own store, actions, reducers, styles, etc. As such, the application will have different widgets but it doesn't know anything about them. 24 | 25 | In oder words, I can have the main application just being the _scaffolding_ with a global state (e.g. `user`, `language`, etc.) and having different parts of the UI as well as different views (e.g. mapped to specific routes) being _modules_, _widgets_ or whatever. 26 | Each module / widget will have then its own store (e.g. `todos`, `blog`, `orders`, `dashboard`, etc.) as well as actions, reducers and so on, and can still access the global state of the app. 27 | 28 | 29 | ### Usage 30 | 31 | This modules exposes two functions: 32 | 33 | - `createProvider([storeName])`: given an optional `storeName` (default being `store`), it returns a `Provider` component. 34 | 35 | > The implementation is _the same_ as the one from `react-redux`, only with the custom store name used as the `context` key. 36 | 37 | - `connect(...)(Component, [storeName])`: the signature of this method is the same as the original `connect` function of `react-redux`. It accepts extra the `storeName` (default being `store`), used to pick the related store from the `context` and pass it down to the _connected component_ as a prop. 38 | 39 | 40 | ```js 41 | // Note: you can still use the original exports of `react-redux`, 42 | // as long as you use the default `store`. 43 | // You can use the two libraries alongside, `react-redux-custom-store` 44 | // uses `connect` from the `react-redux` library at the end. 45 | 46 | // root.js 47 | import { createStore, combineReducers } from 'redux' 48 | import { Provider } from 'react-redux' 49 | 50 | const store = createStore(combineReducers({ 51 | user: (/* state, action */) => ({ name: 'John' }) 52 | })) 53 | 54 | // Uses the default store `store` as name. 55 | const Root = () => ( 56 | 57 | 58 | 59 | ) 60 | ReactDOM.render(, document.getElementById('app')) 61 | 62 | 63 | // todos-container.js 64 | import { createStore, combineReducers } from 'redux' 65 | import { createProvider } from 'react-redux-custom-store' 66 | 67 | const storeName = 'todo' 68 | const todoStore = createStore(combineReducers({ 69 | todos: (/* state, action */) => [{ text: 'OK' }, { text: 'Missing' }], 70 | })) 71 | const Provider = createProvider(storeName) 72 | 73 | // Uses the custom store `todo` as name. 74 | // At this point there are 2 stores in `context`. 75 | const TodosContainer = () => ( 76 | 77 | 78 | 79 | ) 80 | 81 | 82 | // todos.js 83 | import { connect } from 'react-redux-custom-store' 84 | 85 | const TodoProfile = ({ name }) => ( 86 |

{name}

87 | ) 88 | TodoProfile.propTypes = { 89 | name: PropTypes.string.isRequired 90 | } 91 | 92 | const TodoList = ({ todos }) => ( 93 |
    94 | {todos.map(({ text }) => (
  • {text}
    • ))} 95 |
96 | ) 97 | TodoList.propTypes = { 98 | todos: PropTypes.array.isRequired 99 | } 100 | 101 | const ConnectedTodoProfile = connect( 102 | ({ user: { name } }) => ({ name }) 103 | )(TodoProfile) // uses default store name `store` 104 | 105 | const ConnectedTodoList = connect( 106 | ({ todos }) => ({ todos }) 107 | )(TodoList, 'todo') // uses custom store name `todo` 108 | 109 | 110 | const Todos = () => ( 111 |
112 | 113 | 114 |
115 | ) 116 | ``` 117 | 118 | ### License 119 | 120 | MIT 121 | --------------------------------------------------------------------------------