├── .babelrc
├── .eslintignore
├── .eslintrc
├── .gitignore
├── .npmignore
├── .travis.yml
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── LICENSE.md
├── README.md
├── examples
└── simple
│ ├── .babelrc
│ ├── components
│ ├── App.js
│ └── CounterPanel
│ │ ├── CounterPanel.js
│ │ ├── index.js
│ │ └── redux
│ │ ├── CounterState.js
│ │ ├── LogMiddleware.js
│ │ ├── actionTypes.js
│ │ └── actions.js
│ ├── index.html
│ ├── index.js
│ ├── package.json
│ ├── reducers
│ ├── appInfo.js
│ └── index.js
│ ├── server.js
│ └── webpack.config.js
├── package.json
├── src
├── actionTypes.js
├── componentState.js
├── componentStateStore.js
├── index.js
└── utils
│ ├── composeActionCreators.js
│ ├── filters.js
│ ├── getDisplayName.js
│ ├── index.js
│ ├── validateConfig.js
│ └── validateSubscription.js
├── test
├── .eslintrc
├── componentState.spec.js
├── componentStateStore.spec.js
├── helpers
│ ├── actionCreators.js
│ ├── actionTypes.js
│ ├── document.js
│ ├── middleware.js
│ └── reducers.js
└── utils
│ └── document.js
└── webpack.config.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "stage": 0,
3 | "loose": "all"
4 | }
5 |
--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
1 | lib
2 | **/node_modules
3 | **/webpack.config.js
4 | examples/**/server.js
5 | examples/simple/node_modules
6 |
--------------------------------------------------------------------------------
/.eslintrc:
--------------------------------------------------------------------------------
1 | {
2 | "extends": "eslint-config-airbnb",
3 | "env": {
4 | "browser": true,
5 | "mocha": true,
6 | "node": true
7 | },
8 | "rules": {
9 | "react/jsx-uses-react": 2,
10 | "react/jsx-uses-vars": 2,
11 | "react/react-in-jsx-scope": 2
12 | },
13 | "plugins": [
14 | "react"
15 | ]
16 | }
17 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .DS_Store
4 | dist
5 | lib
6 | coverage
7 | .vimsession
8 | .lvimrc
9 |
--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | *.log
3 | src
4 | test
5 | examples
6 | coverage
7 |
--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
1 | language: node_js
2 | node_js:
3 | - "iojs"
4 |
--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | # Change log
2 |
3 | All notable changes to this project will be documented using the
4 | [Releases page](https://github.com/cef62/redux-component-state/releases).
5 | This project adheres to [Semantic Versioning](http://semver.org/).
6 |
--------------------------------------------------------------------------------
/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 |
15 |
--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2015 Matteo Ronchi
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 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # redux-component-state
2 |
3 | [](https://travis-ci.org/cef62/redux-component-state)
4 | [](https://www.npmjs.com/package/redux-component-state)
5 |
6 | Component level state's manager using redux reducers to support on-demand store creation.
7 |
8 | This project is born to satisfy some requirement for an internal app. We needed to create and destroy store fragments on-demand for some specific component. Initially we tried to define specific component reducers, registering them at application start. It worked fine but we not liked define component specific details at application level.
9 | Reducer and action creators of a component state should be isolated and available only to its owner component.
10 |
11 | [This discussion](https://github.com/rackt/redux/issues/159) is related with our requirements and the initial proposal of Dan Abramov (@gaeron) and the experiment from Taylor Hakes (@taylorhakes) helped out to create this project.
12 | Thanks to both!
13 |
14 | The project is in its initial state and lot of work still needs to be done but should be fairly safe to use. We use it in production in a small app and at the moment we haven't found problems.
15 |
16 | ## Todos
17 |
18 | - [ ] add complete test coverage (currently WIP)
19 | - [ ] add usage examples
20 | - [ ] add jsdocs and remove verbose code comments
21 | - [ ] improve subscription object API:
22 | - [ ] add reset() method
23 | - [ ] separate `componentStateStore` and `componentState` HoC in different projects
24 | to permit use of component states with other libraries than React
25 | - [ ] further investigate if the current approach bring performance downsides
26 |
27 | ## Install
28 |
29 | Install it via npm: `npm install --save redux-component-state`.
30 |
31 | ## How to use
32 |
33 | Waiting to better introduction look the example code.
34 |
--------------------------------------------------------------------------------
/examples/simple/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "stage": 0,
3 | "loose": "all"
4 | }
5 |
--------------------------------------------------------------------------------
/examples/simple/components/App.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 |
3 | import {createStore, combineReducers, compose} from 'redux';
4 | import {Provider} from 'react-redux';
5 |
6 | import {reduxComponentStateStore} from 'redux-component-state';
7 |
8 | import appInfo from '../reducers/appInfo';
9 | import CounterPanel from './CounterPanel';
10 |
11 | const combinedReducers = combineReducers({ appInfo });
12 | const createFinalStore = compose(reduxComponentStateStore())(createStore);
13 | const store = createFinalStore(combinedReducers);
14 |
15 | export default class App extends Component {
16 | render() {
17 | return (
18 |
19 | {() =>
21 | );
22 | }
23 | }
24 |
25 |
--------------------------------------------------------------------------------
/examples/simple/components/CounterPanel/CounterPanel.js:
--------------------------------------------------------------------------------
1 | import React, { Component, PropTypes } from 'react';
2 |
3 | import reduxComponentState from 'redux-component-state';
4 |
5 | import * as compActions from './redux/actions';
6 | import CounterState from './redux/CounterState';
7 | import LogMiddleware from './redux/LogMiddleware';
8 |
9 | /** By default mapStateToProps is not required. The default version
10 | * mimics this example returning the private store slice.
11 | * Can be used to pass more complex selectors to the component state
12 | * COnnect instance.
13 | */
14 | function defaultMapStateToProps(key) {
15 | return (state) => Object.assign( {}, state[key] );
16 | }
17 |
18 | class CounterPanel extends Component {
19 |
20 | static propTypes = {
21 | compActions: PropTypes.object.isRequired,
22 | getComponentState: PropTypes.func.isRequired,
23 | counter: PropTypes.shape({
24 | value: PropTypes.number.isRequired,
25 | interactionCount: PropTypes.number.isRequired,
26 | }).isRequired,
27 | }
28 |
29 | static defaultProps = {}
30 |
31 | render() {
32 | const { compActions: actions, counter } = this.props;
33 | const { increment, decrement } = actions;
34 |
35 | return (
36 |
37 | Current Count: {counter.value} increment() }>increment
41 | decrement() }>decrement
42 |
43 | );
44 | }
45 | }
46 |
47 | const componentStateConfig = {
48 | getKey(props) {
49 | const { id = 'defaultCounterPanel' } = props;
50 | return `counter-${id}`;
51 | },
52 | reducer: CounterState,
53 | actions: { compActions },
54 | middlewares: [ LogMiddleware ],
55 | mapStateToProps: defaultMapStateToProps,
56 | };
57 | export default reduxComponentState(componentStateConfig)(CounterPanel);
58 |
--------------------------------------------------------------------------------
/examples/simple/components/CounterPanel/index.js:
--------------------------------------------------------------------------------
1 | import CounterPanel from './CounterPanel';
2 |
3 | export default CounterPanel;
4 |
--------------------------------------------------------------------------------
/examples/simple/components/CounterPanel/redux/CounterState.js:
--------------------------------------------------------------------------------
1 | import combineReducers from 'redux/lib/utils/combineReducers';
2 | import {
3 | INCREMENT,
4 | DECREMENT
5 | } from './actionTypes';
6 |
7 | const initialState = {
8 | value: 0,
9 | interactionCount: 0,
10 | };
11 |
12 | function update({value, interactionCount}, action) {
13 | const newInteractionCount = interactionCount + 1;
14 | const newValue = value + action.value;
15 | return { value: newValue, interactionCount: newInteractionCount };
16 | }
17 |
18 | function counter(state = initialState, action) {
19 | let newState;
20 | switch (action.type) {
21 | case INCREMENT:
22 | case DECREMENT:
23 | newState = update(state, action);
24 | break;
25 |
26 | default:
27 | newState = state;
28 | }
29 | return newState;
30 | }
31 |
32 | const CounterState = combineReducers({ counter });
33 | export default CounterState;
34 |
--------------------------------------------------------------------------------
/examples/simple/components/CounterPanel/redux/LogMiddleware.js:
--------------------------------------------------------------------------------
1 | /* eslint no-unused-vars:0 no-console:0*/
2 | export default function logMiddleware({dispatch, getState}) {
3 | return next => action => {
4 | const { type } = action;
5 | console.log(`Middleware Logger. type: ${type}`);
6 | return next(action);
7 | };
8 | }
9 |
10 |
--------------------------------------------------------------------------------
/examples/simple/components/CounterPanel/redux/actionTypes.js:
--------------------------------------------------------------------------------
1 | export const INCREMENT = 'counter-panel/increment';
2 | export const DECREMENT = 'counter-panel/decrement';
3 |
--------------------------------------------------------------------------------
/examples/simple/components/CounterPanel/redux/actions.js:
--------------------------------------------------------------------------------
1 | import {
2 | INCREMENT,
3 | DECREMENT
4 | } from './actionTypes';
5 |
6 | export function increment(multiplier = 1) {
7 | return {
8 | type: INCREMENT,
9 | value: multiplier,
10 | };
11 | }
12 |
13 | export function decrement(multiplier = 1) {
14 | return {
15 | type: DECREMENT,
16 | value: (-multiplier),
17 | };
18 | }
19 |
20 |
--------------------------------------------------------------------------------
/examples/simple/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 | redux-component-state-example-title
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
--------------------------------------------------------------------------------
/examples/simple/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import App from './components/App';
3 |
4 | React.render(
5 |