Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Readme File - Invisible Reducer #42

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 71 additions & 0 deletions src/invisible/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
![coverage](https://img.shields.io/badge/Coverage-92%25-E01563.svg) ![downloads](https://img.shields.io/npm/dw/redux-recompose.svg?colorB=99d000&label=Downloads&style=popout) [![supported by](https://img.shields.io/badge/Supported%20by-Wolox.💗-blue.svg)](https://www.wolox.com.ar/)
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's add these shields in another PR, so we can separate that from the documentation

# Invisible Reducer 👻

By using invisible reducer, repeating the same logic in each of the reducers is avoided.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

an invisible reducer

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

, we avoid repeating the same logic in each of the reducers.


It is a extracting your cross-reducer logic, so this logic keeps isolated and reusable by our other reducers. Also, it keeps hidden from other reducers, so 👻.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

is extracting
Also, it is kept hidden from other reducers


In a few words, less work...


### Learn Redux-recompose
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need this here, as the person reading this probably already knows r-r


If you are not aware, we invite you to read [**Redux-recompose**](https://github.com/Wolox/redux-recompose)

### Installation
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice! I hadn't noticed we didn't have the installation instructions.

This should go in the main README (in another PR).


Dependencies:
```
>: npm install --save redux
````
if you already have it installed, skip this step:
```
>: npm install --save redux-recompose
```
we will need redux-recompose to use Invisible reducer.

### Example
Then use it in your app, already implemented redux, we add wrapCombineReducers:
```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use ```js so github adds syntax highlighting to the code

import { combineReducers as CR } from 'redux';
import { wrapCombineReducers } from 'redux-recompose'

const combineReducers = wrapCombineReducers(CR);

const rootReducer = combineReducers({
// Add here your reducers as usual.
});
```
CombineReducers: utility from redux. This helps merge several reducers into a root one. Each reducer is part of the global state

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

global state.


And that’s all, invisible in action.

By default, redux-recompose ships with a default invisible reducer that is the following:

```
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same as before, we need to add js

import createReducer from '../../creators/createReducer';
import onLoading from '../../effects/onLoading';
import onSuccess from '../../effects/onSuccess';
import onFailure from '../../effects/onFailure';


// TODO: Let the user specify selectors
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't show this TODO in the docs

const reducerDescription = {
LOADING: onLoading(),
SUCCESS: onSuccess(),
FAILURE: onFailure()
};

export const defaultActionNames = Object.keys(reducerDescription);

// TODO: Let user specify this initialState
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wouldn't show this TODO in the docs

export default createReducer({}, reducerDescription);

```



License
----

MIT