style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">

Middleware en Redux-mx

La parte que yo creo es mas interesante en la librería Redux es la creación de Middlewares y de ese modo extender Redux mas allá de lo que el equipo de Redux nos pueden ofrecer en la librería.

Esta funcionalidad se la agregue a mi pequeño clon, ahora se puede definir Middlewares que reciban el store (estado) y las acciones que se han lanzado, el ejemplo mas común es hacer un logger de las acciones. Este el ejemplo de este Middleware:

package examples.simple.middlewares;

import mx.com.betotto.redux.Middleware;

public class LoggerMiddleware extends Middleware {

    public LoggerMiddleware() {
        this.middleware = store -> next -> action -> {
            System.out.println("Action dispatched:  " + action.toString());

            //System.out.println("State from Middleware:  " + store.getState());
            return next.apply(action);
        };
    }
}

Como se puede ver tiene una firma muy parecida a el logger que viene en la documentación de Redux

const logger = store => next => action => {
  console.log('dispatching', action)
  let result = next(action)
  console.log('next state', store.getState())
  return result
}

También he creado un Middleware que permita hacer acciones que lanzan acciones y de este modo permitan agregar cosas asynchronas y/o concurrentes:

public static AsyncAction addTodoAsync(String todoText) {
    return new AsyncAction((dispatch, getState) -> {
        System.out.println("No more data" + getState.get());
        return dispatch.apply(new Action(ADD_TODO_ASYNC, HashMap.of("text3", todoText)));
    });
}

Para que funcione requerimos modificar el Main

public class Main {

    private static HashMap<String, Object> initialState = HashMap.of("modulo1", HashMap.of("text", ""),"modulo2", HashMap.of("text2", "", "text3", ""));

    public static void main(String... args) {

        Reducer appReducer = Store.combineReducer(HashMap.of(
                "modulo1", Modulo1.reducer,
                "modulo2", Modulo2.reducer));

        Store store = new Store(appReducer, initialState, List.of(new LoggerMiddleware(), new AsyncMiddleware()));

        Runnable unsubcribe = store.subscribe(s -> System.out.println("From main " + s.toString()));

        store.dispatch(Modulo1.addTodo("Hello"));

        store.dispatch(Modulo2.addTodo2("Hello"));

        store.dispatch(Modulo2.addTodoAsync("Async"));

        unsubcribe.run();

        store.dispatch(Modulo2.addTodo2("Hello3"));

    }
}

La salida de esto es:

From main HashMap((modulo1, HashMap((text, Hello))), (modulo2, HashMap((text2, ), (text3, ))))
Action dispatched:  { type=ADD_TODO, payload={HashMap((text, Hello))} }
From main HashMap((modulo1, HashMap((text, Hello))), (modulo2, HashMap((text2, ), (text3, ))))
From main HashMap((modulo1, HashMap((text, Hello))), (modulo2, HashMap((text2, Hello), (text3, ))))
Action dispatched:  { type=ADD_TODO2, payload={HashMap((text2, Hello))} }
From main HashMap((modulo1, HashMap((text, Hello))), (modulo2, HashMap((text2, Hello), (text3, ))))
No more dataHashMap((modulo1, HashMap((text, Hello))), (modulo2, HashMap((text2, Hello), (text3, ))))
From main HashMap((modulo1, HashMap((text, Hello))), (modulo2, HashMap((text2, Hello), (text3, Async))))
Action dispatched:  { type=ADD_TODO_ASYNC, payload={HashMap((text3, Async))} }
From main HashMap((modulo1, HashMap((text, Hello))), (modulo2, HashMap((text2, Hello), (text3, Async))))
Action dispatched:  { type=ADD_TODO_ASYNC, payload={HashMap((text3, Async))} }
From main HashMap((modulo1, HashMap((text, Hello))), (modulo2, HashMap((text2, Hello), (text3, Async))))
Action dispatched:  { type=ADD_TODO2, payload={HashMap((text2, Hello3))} }

Conclusiones

Esta minilibreria no ha sido probada en produccion, tampoco es que necesite muchas pruebas require principalmente las de rendimiento con cientos de miles de acciones, la librería es muy sencilla y si revisas el código fuente de Redux.js tampoco es muy complicada, la forma en que se trabaja usando Redux es lo que es complicado, el cambio de mindset que se debe tener, de ahí el éxito de Redux en si y que muchos se quejen de que es muy complicado, esta librería al igual que Redux.js enfatiza el uso de funciones y de estructuras immutables para evitar al máximo posibles errores.

PD: El codigo ya esta en el repositorio.

style="display:inline-block;width:728px;height:90px"
data-ad-client="ca-pub-5164839828746352"
data-ad-slot="7563230308">