Redux-remake NPM

Redux Remake

Make redux reducers more easier to define

npm install --save --save-exact redux-remake

Motivation

As many of you I started working with Flux architecture and it gave me lot of good features that helped me to work with data flow in my react applications.

And then I found Redux - that I just loved because of it's simplicity and its sweets like redux-form that works only on Redux ecosystem.

At this moment I already had three applications built with Flux and the biggest struggle for me was lack of some features of Flux in it.

The first was lack of waitFor (yes I know that it may lead to wrong design) but still, I already wrote a lot of code that depends on it.

Another problem was that i had to use Stores as classes with its own methods

class ListStore {
    consturctor() {
        this.list = [];
    }

    getAll() {
        return this.list;
    }


    getSorted() {
        return this.list.sort(item => item.id);
    }

    getIds() {
        return this.list.map(item => item.id);
    }

    getById(id) {
        return this.list.find(item => item.id === id);
    }
}

And the last one was store action management. There are a lot of approaches to achieve it in Redux (like redux-actions).

But my goal was to safely migrate about 30 flux stores (and this was in just one app) so I had to add minimal changes.

Usage

Basic Store

import _ from 'lodash';

import {
    Store,
    Reducer
} from 'redux-remake';

const ADD_TODO = 'TODO_STORE/ADD_TODO';

@Store('TodoStore') // Register store in Context
class TodoStore {
    constructor() {
        this.todos = [];
    }

    @Reducer(ADD_TODO)  // Register action reducer in Context
    static handleAddTodo(store:TodoStore, {text}) {
         // some spaghetti here !!
        const nextStore = _.cloneDeep(store);

        nextStore.todos.push({id: Math.random(), text});

        return nextStore;
    }

    static addTodo(text) {
        return {
            text, type: ADD_TODO
        };
    }
}

Immutable Store

import {
    Map,
    List,
    Record
} from 'immutable';

import {
    Store,
    Reducer
} from 'redux-remake';

const ADD_TODO = 'TODO_STORE/ADD_TODO';

@Store('TodoStore')
class TodoStore extends new Record({
    list: new List()
}) {
    @Reducer(ADD_TODO)
    static handleAddTodo(store:TodoStore, {text}) {
        return store.update('list', list => list.push(new Map({
             id: Math.random(), text
         })));
    }

    static addTodo(text) {
        return {
            text, type: ADD_TODO
        };
    }
}

Isomorphic App

// TodoStore.js

import Immutable, {
    Map,
    List,
    Record
} from 'immutable';

import {
    Store,
    Reducer,
    DehydrateHandler,
    RehydrateHandler
} from 'redux-remake';

const ADD_TODO = 'TODO_STORE/ADD_TODO';

@Store('TodoStore')
class TodoStore extends new Record({
    list: new List()
}) {
    @Reducer(ADD_TODO)
    static handleAddTodo(store:TodoStore, {text}) {
        return store.update('list', list => list.push(new Map({
             id: Math.random(), text
         })));
    }

    @DehydrateHandler()
    static dehydrate(state:TodoStore) {
        return state.toJS();
    }

    @RehydrateHandler()
    static rehydrate({list}) {
        return new TodoStore(Immutable.fromJS(list));
    }

    static addTodo(text) {
        return {
            text, type: ADD_TODO
        };
    }
}

// Five minutes later somewhere in your server app code

import {
   dehydrate,
   createStore
} from 'redux-remake';

const store = createStore();

// ... dispatch some actions ...

const dehydratedState = dehydrate(store.getState());

// Another ten minutes later somewhere in your client app code

import {
   createStore
} from 'redux-remake';

const dehydratedState = window.__state__; // or from anywhere else

const store = createStore(dehydratedState);