# react-redux-substate

> create substates to isolate components states

Latest version **0.1.7** (published 2016-05-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-redux-substate
pnpm add react-redux-substate
yarn add react-redux-substate
bun add react-redux-substate
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.7 |
| Published | 2016-05-13 |
| First published | 2016-05-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Nicolas Bouvet |
| Maintainers | titoasty |
| Keywords | react, reactjs, redux, state, substate, local |

## Links

- npm: https://www.npmjs.com/package/react-redux-substate
- Repository: https://github.com/titoasty/react-redux-substate
- Homepage: https://github.com/titoasty/react-redux-substate#readme
- Issues: https://github.com/titoasty/react-redux-substate/issues
- npm.io page: https://npm.io/package/react-redux-substate

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.1.7 (latest) — 2016-05-13
- 0.1.6 — 2016-05-13
- 0.1.5 — 2016-05-13
- 0.1.4 — 2016-05-13
- 0.1.3 — 2016-05-13
- 0.1.2 — 2016-05-13
- 0.1.1 — 2016-05-13
- 0.1.0 — 2016-05-13

## README

React Redux Substate
=========================
Create substates to isolate your components.
Heavily relies on [react-redux](https://github.com/reactjs/react-redux)

[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/titoasty/react-redux-substate/master/LICENSE)

## Installation

React Redux Substate requires **React 0.14 or later.**
```
npm install --save-dev react-redux-substate
```

## Usage

The example is based on Dan Abramov Redux Tutorials [(here on egghead.io)](https://egghead.io/instructors/dan-abramov)

```js
// import mandatory functions
import { connectSubstate, reduceSubstate, substateReducer } from 'react-redux-substate'

// connect your component like you do with react-redux connect function (parameters are the same)
const TodoApp = connectSubstate()(() => {
	return (
		<div>
			<AddTodo />
			<VisibleTodoList />
			<Footer />
		</div>
	)
})

// create your reducer then wrap it in reduceSubstate
const todoApp = reduceSubstate(combineReducers({
		todos,
		visibilityFilter,
		// add this reducer at the end :
		_substates: substateReducer
}))

const store = createStore(todoApp)

// finally, add a "substateId" prop to the components you want to isolate
// a child component can have a different substateId if you want to target another substate
ReactDOM.render(
		<Provider store={store}>
			<div>
				<TodoApp substateId="1" />
				<TodoApp substateId="2" />
			</div>
		</Provider>,
		document.getElementById('root')
)
```

## Documentation

#### `connectSubstate([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`
This is a wrapper of the react-redux connection function.
Refer to the react-redux doc for more information : [`connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])`](docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options)

#### `reduceSubstate()`
Wrap your reducer with this function so the state will be reduced to only the substate specified in the action.

## How Does It Work ?
`connectSubstate` will wrap your component (no injection) and act like a provider to give access to the substateId inside the context.
The `dispatch` method will be wrapped to add a substateId parameter to the action.
Then the reducer will get the substateId and reduce the state to only the part asked for the next reducers.

This is a very simple way to add substates to the components. It does not ensure fractality of the components because substates are stored in the app state.

All fresh and a long way to go !

## License

MIT

---
_Source: https://npm.io/package/react-redux-substate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._