Skip to content

Commit 5abc162

Browse files
committed
feat(simple redux): implement simple redux helpers to register and remove reducers
affects: @patternfly/simple-redux
1 parent 61fdc8a commit 5abc162

20 files changed

+24083
-4
lines changed

package-lock.json

Lines changed: 22772 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

packages/simple-redux/CREDITS.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# CREDITS
2+
3+
* Based on a proposal for adding reducers on the fly by [Vojtech Szocs](https://github.com/vojtechszocs)
4+
5+
* Initially used in [ManageIQ project](http://manageiq.org/)
6+
7+
* Man code written by [Vojtech Szocs](https://github.com/vojtechszocs) and [Karel Hala](https://github.com/karelhala)

packages/simple-redux/README.md

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
### @patternfly/simple-redux
2+
This package provides couple of helper functions which helps you to write redux reducers and most importantly it allows
3+
you to add reducers on the fly.
4+
5+
All credit goes to @vojtechszocs proposing this behavior and how it should work.
6+
#### General Usage
7+
To use this package simply install it, add some reducers and create redux store from `rootReducer`.
8+
9+
1. Install it
10+
```bash
11+
> npm install --save @patternfly/simple-redux
12+
```
13+
14+
2. Add some reducers
15+
```javascript 1.8
16+
import { addReducer } from '@patternfly/simple-redux';
17+
18+
addReducer((state, action) => { ...state });
19+
```
20+
21+
3. Import rootReducer and use it as one of your reducers
22+
```javascript 1.8
23+
import { createStore, applyMiddleware } from 'redux';
24+
import { rootReducer, middlewares } from '@patternfly/simple-redux';
25+
26+
const store = createStore(rootReducer, {}, applyMiddleware(...middlewares));
27+
```
28+
29+
#### Complex usage
30+
You are free to use `rootReducer` as you wish, just bear in mind that only reducers registered via `addReducer` can be
31+
removed on the fly.
32+
33+
##### With combine reducers
34+
If you want to use combineReducers function from redux there is helper method which helps you combine current state
35+
with state from combine reducers `combineReducersWithState`. What it does is that it takes state ane join it together
36+
with state from `combineReducers` function.
37+
```javascript 1.8
38+
import { combineReducersWithState } from '@patternfly/simple-redux';
39+
import { someReducer } from './reducers';
40+
41+
addReducer(combineReducersWithState({
42+
someValue: someReducer
43+
}))
44+
```
45+
46+
##### With redux browser extension
47+
To enable browser extension for redux monitoring simply follow same logic as before with composeEnhancers, plus use
48+
rootReducer from simple redux library as reducer combination.
49+
```javascript 1.8
50+
import { createStore, applyMiddleware, compose } from 'redux';
51+
import { rootReducer, middlewares } from '@patternfly/simple-redux';
52+
53+
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
54+
55+
const store = createStore(
56+
rootReducer,
57+
{},
58+
composeEnhancers(applyMiddleware(...middlewares))
59+
);
60+
```
61+
62+
#### Helper functions
63+
This library comes bundled with some helper functions to make it easier for you to maintain regular redux, adding
64+
reducers and to make it easier to create reducer from Object.
65+
##### addReducer
66+
Basic function used to add new reducer to reducers list. It takes one argument callback function, which will be called
67+
with state and action from redux.
68+
* callback - reducer function callback
69+
* state - redux state to call with callback function
70+
* action - which action was triggered
71+
72+
You then can remove these reducers from reducers list at any time, by calling callbacks returned frum `addReducer`
73+
function.
74+
```javascript 1.8
75+
//add new reucer
76+
import { reducerFunction } from './yourRedeucers';
77+
import { addReducer } from '@patternfly/simple-redux';
78+
79+
const reducerRemove = addReducer(reducerFunction);
80+
const reducerRemove2 = addReducer((state, action) => reducerFunction(state, action));
81+
82+
//remove these reducers
83+
reducerRemove();
84+
reducerRemove2();
85+
```
86+
87+
##### rootReducer
88+
Reducer with reducers list, this object holds all active reducers and calls them whenever new actin is triggered. Use
89+
this object to create new store.
90+
```javascript 1.8
91+
import { createStore } from 'redux';
92+
import { rootReducer } from '@patternfly/simple-redux';
93+
94+
createStore(rootReducer);
95+
```
96+
97+
##### applyReducerHash
98+
This function will help you to construct reducers out of object. Alternative to using switch statements in redux.
99+
```javascript 1.8
100+
import { applyReducerHash, addReducer } from '@patternfly/simple-redux';
101+
import { ACTION_ONE, ACTION_TWO } from './yourActionTypes';
102+
103+
//simple reducer function
104+
function firstReducer(state, action) {
105+
return {
106+
...state,
107+
someData: action.payload.someData
108+
};
109+
}
110+
111+
//map reducer functions to action type keys
112+
const reducersHash = {
113+
[ACTION_ONE]: firstReducer,
114+
[ACTION_TWO]: (state, action) => ({
115+
...state,
116+
anotherData: action.payload.anotherdata
117+
}),
118+
'actionThree': (state = {}) => ({...state})
119+
};
120+
121+
//create reducer with applyReducerHash and add it to reducers list
122+
addReducer((state, action) => applyReducerHash(reducersHash, state, action));
123+
```
124+
125+
##### middlewares
126+
There is log reducer active if you are in development mode `process.env.NODE_ENV` is set to `development` so to add any
127+
new middlewares, just push them to `middlewares` array and create store with these middlewares.
128+
```javascript 1.8
129+
import { createStore } from 'redux';
130+
import { middlewares, rootReducer } from '@patternfly/simple-redux';
131+
import ReduxThunk from 'redux-thunk';
132+
133+
middlewares.push(ReduxThunk);
134+
const store = createStore(
135+
rootReducer,
136+
applyMiddleware(...middlewares)
137+
);
138+
```
139+
140+
#### Contribution
141+
142+
1. Fork this repository
143+
144+
2. Pull your fork
145+
```bash
146+
> git pull git@github.com:${YOUR_NAME}/patternfly-react.git
147+
```
148+
149+
3. Set up remote
150+
```bash
151+
> git remote add upstream https://github.com/patternfly/patternfly-react.git
152+
```
153+
154+
4. Install depenencies
155+
```bash
156+
yarn install
157+
```
158+
159+
5. Run storybook
160+
````bash
161+
yarn start
162+
````
163+
164+
6. Make some changes and create Pull request

0 commit comments

Comments
 (0)