|
| 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