react-redux-patch

react-redux-patch

What is react-redux-patch?

react-redux-patch is just another library which tries to simplify the web application development for react applications. From various ideas I came across past few years and a few implementations which I think are founding ground for this project, I decided to write this library to abstract the general setup of react-redux application. It specifically focuses and solves the problem of registering dynamic reducers. It also provides shorthand syntax for connect, mapStateToProps and mapDispatchToProps

Install

npm install --save react-redux-patch

yarn add react-redux-patch

Usage

Creating a module

index.js

import { MicroModule } from 'react-redux-patch';
import AppContainer from '@AppContainer/index.js';
import routes from '@routes/index.js';
import reducers from '@reducers/index.js';

const microModule = new MicroModule('TheCoolKids', routes, reducers, AppContainer, 'root');

if (module.hot) {
  module.hot.accept("@routes/index", () => {
    microModule._render("@routes/index");
  })
}

Creating App Container

@AppContainer/index.js

import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';

export default class AppContainer extends Component {
    static propTypes = {
        cleanRoutes: PropTypes.array.isRequired,
        history: PropTypes.object.isRequired,
        children: PropTypes.oneOfType([
            PropTypes.arrayOf(PropTypes.node),
            PropTypes.node
        ]).isRequired
    }

    render() {
        return (
            <div>
                {children}
            </div>
        );
    }
}

Creating Root Reducers

@reducers/index.js

const common = (state = {}, action) => {
    switch (action.type) {
      default:
        return state;
    }
};

export default {
  common
}

Creating Routes

@routes/index.js

import DashboardPage from '@pages/dashboard/index.js'

const routes = [{
    path: '/',
    key: 'root',
    component: Dashboard,
    children: [{
      path: '/dashboard',
      key: 'dashboard',
      component: DashboardPage
    }]
}]

export default routes;

StatefulComponent: connect, mapStateToProps and mapDispatchToProps Abstraction

@pages/dashboard/index.js

import React, { Component } from "react";
import PropTypes from "prop-types";

const Actions = {
    initialize: () => dispatch => {
        dispatch({ type: "DASHBOARD/INITIALIZE" });
    }
};

const INITIAL_STATE = {
    name: "A sample Dashboard Page"
    productName: "Macbook Pro",
    discount: 0,
    matches: []
};

const Reducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        default:
          return state;
    }
}


class DashboardPage extends Component {
  static propTypes = {
    /** Map prop with same name as 
      *  propName i.e. state.dashboard.name 
      **/
    @Prop
    name: PropTypes.string
    
    /** Map Prop with differnt name in state
      * i.e. state.dashboard.product
    @PropMap("productName")
    itemName: PropTypes.string
    
    /** Map prop with same name as propName
      * but update its initial value in store
      * in this case state.dashboard.discount will be mapped.
      * Before mapping it will update passed value in state.
      **/
    @PropInit
    discount: PropTypes.number
    
    /** Map prop with different name in state
      * but update its initial value in store
      * in this case state.dashboard.matches will be mapped.
      * Before mapping it will update passed value in state
      **/
    @PropMapInit("interests")
    matches: PropTypes.array
    
    
    /** Map prop with absolute given key path in state 
      * i.e. state outside of this component
      * Its usage is to access the global state objects that created in root reducers.
      * In this case state.application.name will be mapped.
      **/  
    @PropMapGlobal("state.application.name")
    applicationName: PropTypes.string
    
    /** All actions from Actions object will be available here!!
      * no need to map them
      **/
     initialize: PropTypes.func.isRequired 
  }
  
  render() {
    return (
      <>
        <div>Sample Dashboard Page</div>
        <pre>{JSON.stringify(this.props)}</pre>
      </>
    );
  }
}

/** Returns a connected component 
  * and dynamically attaches reducer at state."dashboard" key 
  ** /
export default StatefulComponent(DashboardPage, Actions, Reducer, "dashboard", false)

WithSaga: Dynamically register saga in application

import React, { Component } from "react";
import { put, takeEvery, all } from 'redux-saga/effects'
import { WithSaga } from "react-redux-patch";

const delay = (ms) => new Promise(res => setTimeout(res, ms))

function* incrementAsync() {
  yield delay(1000)
  yield put({ type: 'INCREMENT' })
}

function* watchIncrementAsync() {
  yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}

// notice how we now only export the rootSaga
// single entry point to start all Sagas at once
function* rootSaga() {
  yield all([
    watchIncrementAsync()
  ])
}

Class ABC extends Component {
  render() {
    return (
      <div>Sample Component</div>
    );
  }
}

WithSaga(ABC, rootSaga);

StatefulComponent: connect, mapStateToProps and mapDispatchToProps Abstraction

Without Decorator Support

Method 1: mapPropTypes - If PropTypes are being used

import React, { Component } from "react";
import PropTypes from "prop-types";
import { mapPropTypes, StatefulComponent, Prop, PropInit, PropMap, PropMapInit, PropMapGlobal } from "react-redux-patch";

const Actions = {
    initialize: () => dispatch => {
        dispatch({ type: "DASHBOARD/INITIALIZE" });
    }
};

const INITIAL_STATE = {
    name: "A sample Dashboard Page"
    productName: "Macbook Pro",
    discount: 0,
    matches: []
};

const Reducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        default:
          return state;
    }
}


class DashboardPage extends Component {
  static propTypes = {
    name: PropTypes.string
    itemName: PropTypes.string
    discount: PropTypes.number
    matches: PropTypes.array
    applicationName: PropTypes.string
    
    /** All actions from Actions object will be available here!!
      * no need to map them
      **/
     initialize: PropTypes.func.isRequired 
  }
  
  render() {
    return (
      <>
        <div>Sample Dashboard Page</div>
        <pre>{JSON.stringify(this.props)}</pre>
      </>
    );
  }
}

mapPropTypes(DashboardPage, {
    name: [Prop],
    itemName: [PropMap, "productName"]
    discount: [PropInit],
    matches: [PropMapInit,"interests"],    
    applicationName: [PropMapGlobal,"state.application.name"]
});

/** Returns a connected component 
  * and dynamically attaches reducer at state."dashboard" key 
  ** /
export default StatefulComponent(DashboardPage, Actions, Reducer, "dashboard", false)

Method 2: mapStateProps - If PropTypes are optional or you like to use some enhancers like selectors

import React, { Component } from "react";
import PropTypes from "prop-types";
import { mapStateProps, StatefulComponent, Prop, PropInit, PropMap, PropMapInit, PropMapGlobal } from "react-redux-patch";

const Actions = {
    initialize: () => dispatch => {
        dispatch({ type: "DASHBOARD/INITIALIZE" });
    }
};

const INITIAL_STATE = {
    name: "A sample Dashboard Page"
    productName: "Macbook Pro",
    discount: 0,
    matches: []
};

const Reducer = (state = INITIAL_STATE, action) => {
    switch (action.type) {
        default:
          return state;
    }
}


class DashboardPage extends Component {
  static propTypes = {
    name: PropTypes.string
    itemName: PropTypes.string
    discount: PropTypes.number
    matches: PropTypes.array
    applicationName: PropTypes.string
    
    /** All actions from Actions object will be available here!!
      * no need to map them
      **/
     initialize: PropTypes.func.isRequired 
  }
  
  render() {
    return (
      <>
        <div>Sample Dashboard Page</div>
        <pre>{JSON.stringify(this.props)}</pre>
      </>
    );
  }
}

mapStateProps(DashboardPage, (state, ownProps) => {
    name: state.dashboard.name,
    itemName: state.dashboard.productName,
    discount: state.dashboard.discount,
    matches: state.dashboard.interests,    
    applicationName: state.application.name
});

/** Returns a connected component 
  * and dynamically attaches reducer at state."dashboard" key 
  ** /
export default StatefulComponent(DashboardPage, Actions, Reducer, "dashboard", false)

API

MicroModule(name, routes, reducers, appContainer, containerId , userSpecifiedMiddleWares)

Argument Name	Sample value	Description	Optional
name	"Slack"	Name of module	No
routes	`const routes = [{```	Routes for application	No
	path: '/',
	key: 'root',
	component: Dashboard,
	children: [{
	path: '/dashboard',
	key: 'dashboard',
	component: DashboardPage
	}]
	}]
reducers	const rootReducers = { };	Global root reducers if you want to abstract stuff like notifications	No
appContainer	const appContainer=({props,cleanRoutes}) => (<>{this.props.children</>)	App Container where your routes will render. You can customise things like custom header before routes.	No
containerId	root	Dom element id in which app will be render	Yes. Defaults to root
userSpecifiedMiddleWares		Additional redux middlewares that you need added	Yes. Defaults to ```[]````

StatefulComponent(ReactComponent, Actions, Reducer, DynamicStateName, Inherit?)

Argument Name	Default value	Description	Optional
ReactComponent	(<></>)	A react component which needs to be connected	No
Actions	{}	Actions object that will be used in dynamically created mapDispatchToProps	No
Reducer	(state) => { return state }	Reducer that needs to be dynamically registered against DynamicStateName	No
DynamicStateName	'\_' + Math.random().toString(36).substr(2, 9)	A dynamic state key where reducer will be attached	No
Inherit	false	Whether to create the state dynamically inside another state key generated by StatefulComponent	Yes

WithSaga(ReactComponent, RootSagaFunc)

Argument Name	Description	Optional
ReactComponent	Any base component before which saga is required	No
RootSagaFunc	A root saga function to be dynamically registered	No

License

MIT © saurabhnemade