react-redux-oop
OOP implementation of redux and react.
Moving to 2.0.x, docs will change soon.
Motivation
Functional programming is very popular right now among web and mobile frontend developers. It's a cool way of doing things but in my opinion it's never black and white. It's a good paradigm and developers can learn a hell lot out of it but I personally don't like they apps are being organized. I just like many developers don't like plain functions in hundreds lowercase files. I like the class structure, because it eases reading and understanding the code a lot. I believe this implementation of redux and react can be helpful for bigger applications.
Installation
npm install --save react-redux-oop
The UMD build is in the dist directory.
Description
This is just an implementation of react and redux. It uses plain react
, redux
and react-redux
. No functionality is changed or added to these libraries. It's only a way to organize your app with a bunch of helpful classes. Also it solves the problem with multiple stores and binded action creators.
Store
This is a wrapper of the redux store. It's purpose is to be able to easily enable and disable reducers without too much function composition. Also splits reducers by actions and store path, instead of just store path. The store requires the usage of seamless-immutable. It will automatically force it onto your state objects. It also extends eventemitter3.
Reducers
Reducers in the Store are added either as a single reducer or as an object of this format:
store;
Controller
This "abstract" class is used to remove the need of action creators. It combines dispatching with creating the action. Every controller is provided with the store's dispatch. It also works on the server, because you can create multiple controllers with different stores. Action creators cannot be binded to the dispatch, because the store changes on the server and they are just functions, but controllers can, because they have context.
Container
This is an "abstract" extension to the React.Component class. It uses react-redux to connect to the store but used a different syntax and flow to utilize the dispatch method. Every Container component can set an actions
object of Controllers which are automatically provided with the store from react-redux'es Provider. Containers are always treated as pure.
App
An "abstract" facade class for your application. It's supposed to be extended with custom functionality. It only has a bootstrapping function and may not be used at all if you don't like it.
Example
There is a todo example in the example directory. It shows the full usage. Here is the basic idea:
{ this; } { this; } { this; ; } const TodoReducers = 'ADD_TODO': 'todo': { let newId = statelastId + 1; return lastId: newId items: stateitems } 'REMOVE_TODO': 'todo.items': state // This is mapStateToProps from react-redux static { return items: statetodoitems ; } // Actions can be defined this way: actions = todo: another: ; // or this way: actions = ; { return <TodoList items=thispropsitems onAdd= thisactions onRemove= thisactions /> ; } TodoContainer = TodoContainer; { super todo: lastId: 0 items: {} ; if processenvNODE_ENV !== 'production' this; let matches = windowlocationhref; let session = matches && matcheslength ? matches1 : null; let devTools = null; if window'devToolsExtension' devTools = window'devToolsExtension'; if devTools this; } { return <div> <TodoContainer /> </div> ; }; { let store = super; store; return store; } // Create an app and append it to the DOM const app = ; app ; // We can just create a controller and execute new actions. let controller = appstore;controller;controller;controller;