# react-redux-reuse

> Use it to create reusable components for React-Redux project.

Latest version **1.0.4** (published 2016-10-21) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: no vulnerabilities.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2016-10-21 |
| First published | 2016-09-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | maoshuchen |
| Maintainers | neverstopsteps |
| Keywords | react-redux, react-redux-reuse, reudx-reuse, react-reuse, reuse |

## Links

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

## Dependencies (2)

- [redux-sword](https://npm.io/package/redux-sword.md) ^1.0.5
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^2.1.0

## Recent versions

- 1.0.4 (latest) — 2016-10-21
- 1.0.3 — 2016-10-09
- 1.0.2 — 2016-10-09
- 1.0.1 — 2016-09-29
- 1.0.0 — 2016-09-28

## README

## What is React-Redux-Reuse
[![npm](https://img.shields.io/npm/v/react-redux-reuse.svg?maxAge=2592000)](https://www.npmjs.com/package/react-redux-reuse)
[![npm](https://img.shields.io/npm/dt/react-redux-reuse.svg?maxAge=2592000)](https://www.npmjs.com/package/react-redux-reuse)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://raw.githubusercontent.com/somewind/react-redux-reuse/master/LICENSE)

`React-Redux-Reuse` is a component, which you can use to create reusable components for React-Redux project.


## Installation

To install the stable version:

```
npm install --save-dev react-redux-reuse
```

## How to Use?

`React-Redux-Reuse` work with:

- [React](https://github.com/facebook/react) 
- [React-Dom](https://www.npmjs.com/package/react-dom) 
- [Redux](https://github.com/reactjs/redux) 
- [React-Redux](https://github.com/reactjs/react-redux) 
- [Redux-Thunk](https://github.com/gaearon/redux-thunk) 
- [Redux-Sword](https://github.com/somewind/redux-sword) (About `Redux-Sword`, you can learn from [Here](https://github.com/somewind/redux-sword))
   

A completed example is combine `counter` and `todos` app in one. Those apps is examples from [Redux](https://github.com/reactjs/redux) , which used `React` also.

[Example](https://github.com/somewind/react-redux-reuse/tree/master/examples)

![demo](img/demo.png)

## Code from Example

Action definition

```js

export function onIncrement() {
  return options => (dispatch, getState) =>{
    //do some network stuff.
    dispatch({
      type: 'INCREMENT',
      [options.name]: {
        count: getState()[options.name].count + 1
      },
    })
  }
}

```

Reducer definition by `Redux-Sword`

```js

export default {
  count: 0,
}

```

`React-Redux` component definition

```js

import React, { Component } from 'react'
import {bindActionCreators, connect} from 'react-redux-reuse'

import Counter from './components/Counter'
import * as actions from './actions'

class App extends Component {
  render() {
    const {count, actions} = this.props
    return (
      <Counter onIncrement={actions.onIncrement} onDecrement={actions.onDecrement} value={count}/>
    )
  }
}

export default connect(actions)(App);

// Advanced Usage:

// function mapStateToProps(options, state) {
//   return {
//     ...state[options.name],
//     otherCombineState,
//   };
// }
//
// function mapActionToProps(options, dispatch, getState) {
//   return {actions: bindActionCreators(options, {...actions, otherCombineAction}, dispatch)};
// }
//
// export default connect(mapStateToProps, mapActionToProps)(App);

```

Main App Reference

```js
/**
 * Created by maoshuchen on 9/28/2016.
 */
import React from 'react'
import { render } from 'react-dom'
import { createStore, applyMiddleware, compose, combineReducers} from 'redux';
import {equipSword} from 'redux-sword'
import thunk from 'redux-thunk';
import { Provider } from 'react-redux'

import CounterAppCreator from './counter'
import counterReducers from './counter/reducers'

import TodosAppCreator from './todos'
import todosReducers from './todos/reducers'

const reducers = combineReducers(equipSword({
  counterApp: counterReducers,
  todosApp: todosReducers
}));

const store = compose(applyMiddleware(thunk), window.devToolsExtension ? window.devToolsExtension() : f => f )(createStore)(reducers);

const AppCounter = CounterAppCreator({
  name: 'counterApp'
});

const AppTodos = TodosAppCreator({
  name: 'todosApp'
});

render(
  <Provider store={store}>
    <div>
      <AppCounter />
      <AppTodos />
    </div>
  </Provider>,
  document.getElementById('root')
)


```

## License

MIT

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