-
Notifications
You must be signed in to change notification settings - Fork 16
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
base: master
Are you sure you want to change the base?
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
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/) | ||
# Invisible Reducer 👻 | ||
|
||
By using invisible reducer, repeating the same logic in each of the reducers is avoided. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
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 👻. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
In a few words, less work... | ||
|
||
|
||
### Learn Redux-recompose | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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: | ||
``` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Use |
||
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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
And that’s all, invisible in action. | ||
|
||
By default, redux-recompose ships with a default invisible reducer that is the following: | ||
|
||
``` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Same as before, we need to add |
||
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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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 |
There was a problem hiding this comment.
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