Infinite Reducer
Take your reducers to infinity and beyond!
Infinite Reducer is a Redux library that allows you to reuse your reducer as many times as you would like.
Requirements
Installation
yarn add infinite-reducer
Usage
Create your Infinite Reducer
Starting with a reducer...
const reducer = (state = {}, action) => {
switch (action.type) {
case 'TEST_ACTION':
return action.payload;
default:
return state;
}
};
Wrap your reducer using our createInfiniteReducer
helper, passing a UNIQUE key and the reducer...
import { createInfiniteReducer } from 'infinite-reducer';
const UNIQUE_KEY = 'INFINITE_KEY';
const infiniteReducer = createInfiniteReducer(UNIQUE_KEY, reducer);
Pass your Infinite Reducer anywhere in your store...
import { createStore, combineReducers } from 'redux';
import infiniteReducer from './reducers';
const reducers = combineReducers({
infinite: infiniteReducer,
});
const store = createStore(reducers);
Reducer setup complete!
Create your Infinite Action
Starting with an action that your reducer handles...
const action = payload => ({
type: 'TEST_ACTION',
payload,
});
Wrap your action using our createIniniteAction
helper, passing the same UNIQUE key (given to the infinite reducer) and the action...
import { createInfiniteAction } from 'infinite-reducer';
// UNIQUE_KEY === 'INFINITE_KEY'
const infiniteAction = createInfiniteAction(UNIQUE_KEY, action);
Action setup complete!
See it in action!
Once setup, dispatch the infiniteAction passing a UNIQUE reducer key and any payload the action accepts...
import { infiniteAction } from './actions';
const UNIQUE_REDUCER_KEY = 'REDUCER_KEY';
const payload = { foo: 'bar' };
dispatch(infiniteAction(UNIQUE_REDUCER_KEY)(payload))
This will create new state under the UNIQUE reducer key based on the reducer implementation...
{
infinite: {
REDUCER_KEY: {
foo: 'bar',
},
},
}
You can create a separate reducer state by passing a new UNIQUE reducer key, while dispatching the same action...
import { infiniteAction } from './actions';
const OTHER_UNIQUE_REDUCER_KEY = 'OTHER_REDUCER_KEY';
const payload = { hello: 'world' };
dispatch(infiniteAction(OTHER_UNIQUE_REDUCER_KEY)(payload))
This will create new state under the new UNIQUE reducer key...
{
infinite: {
REDUCER_KEY: {
foo: 'bar',
},
OTHER_REDUCER_KEY: {
hello: 'world',
},
},
}
BOOM!
Meta
Tae Kim – Github - LinkedIn – TaeKimJR@gmail.com
Distributed under the MIT license. See LICENSE
for more information.
Contributing
- Fork it (https://github.com/TaeKimJR/infinite-reducer/fork)
- Create your feature branch (
git checkout -b feature/fooBar
) - Commit your changes (
git commit -am 'Add some fooBar'
) - Push to the branch (
git push origin feature/fooBar
) - Create a new Pull Request