# redux-simple-events

> Simple Redux Events - easy way to work with Redux

Latest version **0.1.4** (published 2020-11-05) · MIT license · 0 weekly downloads

## Install

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

## Health

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

Positive: has types; no vulnerabilities; high quality score.

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

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2020-11-05 |
| First published | 2020-10-13 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 5.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | immortal1070 |
| Maintainers | immortal1070 |
| Keywords | javascript, redux |

## Links

- npm: https://www.npmjs.com/package/redux-simple-events
- Repository: https://github.com/immortal1070/redux-simple-things/tree/master/packages/redux-simple-events
- npm.io page: https://npm.io/package/redux-simple-events

## Recent versions

- 0.1.4 (latest) — 2020-11-05
- 0.1.3 — 2020-10-13
- 0.1.2 — 2020-10-13
- 0.1.1 — 2020-10-13

## README

## Redux Simple Events
The idea of this project is to propose one of the solutions for the known "Redux boilerplate" problem.

In the past I was storing all the Redux-related files in different folders:
* action types
* action creators
* reducers

Which was causing these files grow and it was quite hard to debug.
Also for small pages it always meant to insert code into several files just for 1 action, which is quite inconvenient.

When you search for usages of action creator you don't see which reducers and sagas are using it.

To solve this problem I used the next approach which works perfect for small pages.

type, action creator and reducer are described as a `Event` object.action

Benefits
* easy to debug
* when you create an action usually you want to control and see what does it do with state
* minimal boilerplate
* not a silver bullet of course - for big complex logic it's probably not suitable

Idea is to describe events in one file:
```javascript
import {initEvents} from 'redux-simple-events'

const {event, allEvents} = initEvents()

export const configsAppMounted = event({
  type: 'CONFIGS_APP_MOUNTED',
  action: (paramFromUrl) => ({
     payload: {
       paramFromUrl
     }
   })
})

export const configMetadatasLoaded = event({
  type: 'CONFIGS_METADATAS_LOADED',
  action: (configMetadatas) => ({
    payload: {
      configMetadatas
    }
  }),
  reducer: (state, action) => {
    const {configMetadatas} = action.payload
    return {
      ...state,
      configMetadatas,
      loading: false
    }
  }
})
// ...
export const configsEvents = allEvents
```
GenerateReducers from the events and pass it to Redux:

```javascript
import {configsEvents} from './configsEvents'

const createRootReducer = () =>
  combineReducers({
    [CONFIGS_REDUCER_ROOT]: generateReducers(initialState, configsEvents)
  })
```

After that just export the event object and dispatch event using `.action` method
```javascript
import {configsAppMounted} from '../../store/events/configurations/configsEvents'
//...
useEffect(() => {
  dispatch(configsAppMounted.action(paramFromUrl))
}, [])
```

Or catch action in redux-saga:
```javascript
import {configsAppMounted, configMetadatasLoaded} from '../../store/events/configurations/configsEvents'

function* getConfigMetadatas() {
  const response = yield call(configsResource.getConfigMetadatas)
  yield put(events.configMetadatasLoaded.action(response.data))
}

export function* configsSagaWatcher() {
  yield takeEvery(events.configsAppMounted.type, getConfigMetadatas)
}
```

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