# compdata

> Action factory for setting redux data

Latest version **1.0.2** (published 2018-05-07) · ISC license · 0 weekly downloads

## Install

```sh
npm install compdata
pnpm add compdata
yarn add compdata
bun add compdata
```

## 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.2 |
| Published | 2018-05-07 |
| First published | 2018-05-07 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 6 |
| Unpacked size | 55.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | eklemen |
| Maintainers | eklemen |

## Links

- npm: https://www.npmjs.com/package/compdata
- npm.io page: https://npm.io/package/compdata

## Dependencies (6)

- [react](https://npm.io/package/react.md) ^15.5.4
- [redux](https://npm.io/package/redux.md) ^3.7.2
- [webpack](https://npm.io/package/webpack.md) ^2.6.1
- [react-redux](https://npm.io/package/react-redux.md) ^5.0.7
- [redux-thunk](https://npm.io/package/redux-thunk.md) ^1.x
- [immutability-helper](https://npm.io/package/immutability-helper.md) ^2.6.6

## Recent versions

- 1.0.2 (latest) — 2018-05-07
- 1.0.1 — 2018-05-07
- 1.0.0 — 2018-05-07

## README

# Redux CompData

## What is this?
`CompData` is a higher order component that exposes props to quickly set data into your redux store. This works much in the same way `this.setState()` works, only the data ends up in redux.

## Why?
This package removes the need to create any additional actions, reducers, extra files, or tests. This makes adding data to the store as easy as passing our component to `connect` and calling a function from `props`. The goal is to help organize redux data by name-spacing it based on the name of the components.

## Getting Started

#### Install via npm
```text
npm install -S compdata
# Or
yarn add compdata
```

#### Add CompData to your rootReducer
```jsx harmony
// rootReducer.js
import { CompDataReducer } from 'compdata';

const rootReducer = combineReducers({
    CompData: CompDataReducer
})
```
#### Wrap your component with the `connect` HOC
```javascript
import { connect } from 'compdata';

export default connect()(LoginContainer, 'LoginContainer')
// Creates redux object at: state.CompData.LoginContainer

// Additional props and actions are params of connect as usual
// Apart from the regular redux syntax, just pass in the string of the component name
// The string will be used to name the object in state.CompData
export default connect(
    mapStateToProps, mapDispatchToProps
)(LoginContainer, 'LoginContainer');

```

#### Full component example
```jsx harmony
import React, { Component } from 'react';
import { connect } from 'compdata';

class LoginContainer extends Component {
    componentDidMount() {
        const { setData } = this.props;
        setData({ isAuthenticated: false });
    }

    toggleAuth() {
        const { setData, compData } = this.props;
        setData({
            isAuthenticated: !compData.isAuthenticated
        })
    }

    render() {
        const { compData } = this.props;
        return (
            <div>
                <p>{ compData.isAuthenticated ? 'Welcome back!' : 'Please Login'}</p>
                <button onClick={ this.toggleAuth }>Toggle Login</button>
            </div>
        );
    }
}

// Note: Calling setData will implicitly use the name passed in
// (ie 'LoginContainer') unless specified otherwise
export default connect(
    mapStateToProps, actions
)(LoginContainer, 'LoginContainer');

```

#### Call `setData` for a different component
```jsx harmony
// you can setData with a different key name, just pass a string as the first param
setData('SomeOtherComponent', {data})

// this creates: state.CompData.SomeOtherComponent.data

```

#### Redux store structure example
```jsx harmony
store: {
    CompData: {
        LoginContainer: {
            isAuthenticated: true,
            userInfo: {
                name: 'Tim',
                email: 'tim@domain.com'
            }
        },
        Todos: {
            selectedTodo: {
                title: 'take dog for a walk',
                complete: true
            }
        }
    }
}
```

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