# redux-simple-container

> HOC to automate the creation of redux containers

Latest version **1.1.0** (published 2019-10-01) · MIT license · 0 weekly downloads

## Install

```sh
npm install redux-simple-container
pnpm add redux-simple-container
yarn add redux-simple-container
bun add redux-simple-container
```

## 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.1.0 |
| Published | 2019-10-01 |
| First published | 2019-02-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 2.5 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | Ettore Panini |
| Maintainers | etto91 |
| Keywords | redux, hoc, react, container, connect |

## Links

- npm: https://www.npmjs.com/package/redux-simple-container
- Repository: https://github.com/Etto91/redux-simple-container
- Homepage: https://github.com/Etto91/redux-simple-container#readme
- Issues: https://github.com/Etto91/redux-simple-container/issues
- npm.io page: https://npm.io/package/redux-simple-container

## 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

- 1.1.0 (latest) — 2019-10-01
- 1.0.9 — 2019-05-14
- 1.0.8 — 2019-05-14
- 1.0.7 — 2019-04-09
- 1.0.6 — 2019-02-14
- 1.0.5 — 2019-02-14
- 1.0.4 — 2019-02-13
- 1.0.3 — 2019-02-13
- 1.0.1 — 2019-02-13

## README

# Redux Simple Container = HOC for react

[![npm version](https://badge.fury.io/js/redux-simple-container.svg)](http://badge.fury.io/js/redux-simple-container)

[![NPM](https://nodei.co/npm/redux-simple-container.png)](https://nodei.co/npm/redux-simple-container/)

It has happened to me very often to realize only at the end of the creation of a component of needing to connect it with redux. This HOC speed up the container creation.

# Usage

1. Install the npm package:

```bash
    npm install --save redux-simple-container
    or
    yarn add redux-simple-container
```

2. Import it:

```javascript
import reduxSimpleContainer from "redux-simple-container";
```

3. Create a simple component with a title and two action for change the title and wrap it up reduxSimpleContainer HOC:

```javascript
const TitleComponent = ({ title, changeTitle, changeTitleSecondButton }) => (
    <div>
        <h1>{title}</h1>
        <button onClick={() => changeTitle("NEW TITLE")}>Change Title</button>
        <button onClick={() => changeTitleSecondButton()}>Change Title</button>
    </div>
);

const changeTitleSecondButton = () => dispatch =>
        dispatch({ type: "CHANGE_TITLE", title: "SECOND TITLE" })
};

export default reduxSimpleContainer(
    [{ type: "CHANGE_TITLE", params: ["title"] }, "dispatch",
    changeTitleSecondButton],
    ["titleState.title"],
    TitleComponent
);
```

4. the exported component will be equal at this:

```javascript
import { connect } from "react-redux";
import TitleComponent from "../components/TitleComponent";
import { bindActionCreators } from "redux";

const mapStateToProps = (state, ownProps) => ({
    title: state.titleState.title
});

const mapDispatchToProps = dispatch => ({
    changeTitle: title => dispatch({ type: "CHANGE_TITLE", title }),
    dispatch,
    ...bindActionCreators({ changeTitleSecondButton }, dispatch)
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(TitleComponent);
```

to summarize is a function that takes these 3 parameters.

# Parameters

**actions**: First parameter. An array of actions that will create the mapDispatchToProps object. they can be of three type:

string: the prop name is the camelCase value of the string and it is a function that dispatch an action with the string passed as a type. you can pass "dispatch" and you will get the dispatch function as a prop. example of passing "CHANGE_TITLE"

```
{
  ...
  changeTitle: () => dispatch({ type: "CHANGE_TITLE" }),
  ...
}
```

object: action can be an object with the type of the action to dispatch and an array of params that you want to attach to the function. example an action like

```
{
  type: "CHANGE_TITLE",
  params: ["title"],
}
```

creates a key in the mapDispatchToProps like this

```
{
  ...
  changeTitle: (title) => dispatch({ type: "CHANGE_TITLE", title }),
  ...
}

```

otherwise you can simply pass function that will be bind as a props with redux bindActionCreators

**stateRequested**: Second parameter. Is an array of string. you have to pass a list of state key to map as a props. you can request nested state key split keys with a point. example if you pass an array like this

```
["book", "book.title", "book.author"]
```

it will create a mapStateToProps object like this

```
{
  book: state.book,
  title: state.book.title,
  author: state.book.author
}
```

**Component**: Third parameter. the component to connect.

# Contributig

if you want to contribute to the development of the package feel free to do it.

```bash
    npm install
    // to build the demo folder
    npm run dev
    // to build the source
    npm run build
```

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