redux-callback-reducer

redux-callback-reducer allows any function or class method to make a reducer for your state, without adding any additional actions.

Installation

npm install --save redux-callback-reducer

Tutorial

To use redux-callback-reducer you need to configure your state using generateReducers or createCallbackReducer, prepare a decorator or wrapper function, and make your functions as state reducer.

To use the decorator you need to configure babel-plugin-transform-decorators-legacy

Configure state

You can use generateReducers to generate a nested state or generate your state using combineReducers from redux and createCallbackReducer from redux-callback-reducer

Using generateReducers:

import { combineReducers } from 'redux'
import { generateReducers } from 'redux-callback-reducer';
 
const rootReducer = combineReducers({
    users: generateReducers('users', {
        items: [],
        isLoading: false
    }),
});

Using combineReducers and createCallbackReducer:

import { combineReducers } from 'redux'
import { createCallbackReducer } from 'redux-callback-reducer';
 
const rootReducer = combineReducers({
    admins: combineReducers({
        items: createCallbackReducer('admins.items', []),
        isLoading: createCallbackReducer('admins.isLoading', false),
    })
});

You can create a flat state using createCallbackReducer:

import { combineReducers } from 'redux'
import { createCallbackReducer } from 'redux-callback-reducer';
 
const rootReducer = combineReducers({
    admins: createCallbackReducer('admins', {}),
});

Creating a wrapper or decorator

You need to create a wrapper for functions or decorator for methods.

Wrapper:

import { store } from './store';
import { createWrapper } from 'redux-callback-reducer';
 
export const wrapper = createWrapper(store);

Decorator:

import { store } from './store';
import { createDecorator } from 'redux-callback-reducer';
 
export const reducer = createDecorator(store);

Using wrapper or decorator:

Wrapper:

import { wrapper } from '../wrapper';
 
export const setAdmins = wrapper('admins.items', (items, state) => items);
 
export const getAdmins = () => fetch('/api/admins/').then(setAdmins);

Decorator:

import { decorator as reducer } from '../decorator';
 
export class UserStateService { 
    static getUsers() {
        return fetch('/api/users/')
            .then(this.setUsers);
    }
    
    @reducer('users.items')
    static setUsers(users, state) {
        return users;
    }
}

If you do not create nested state, you can write a reducer as follows:

import { decorator as reducer } from '../decorator';
 
export class UserStateService { 
    static getUsers() {
        return fetch('/api/users/')
            .then(this.setUsers);
    }
    
    @reducer('users')
    static setUsers(items, state) {
        return {
            ...state,
            items,
        };
    }
}

Example

example - basic reference implementation