oo-redux-utils

Object-oriented Redux Utils

Get rid of switch-cases in your code by using object-oriented Redux Utils!

Read article: Replace using conditionals with Polymorphism

Prerequisites

"react-redux": "^6.0.0",
"redux": "^4.0.1"
"flow-bin": "^0.105.0"

Installation

npm install --save oo-redux-utils

Usage

Create Object-oriented action

Create a new Object-oriented action by creating a class for action that extends AbstractAction<StateType> Then implement performActionAndReturnNewState method

PersonState.js

// @flow

export type PersonState = $Exact<{
    +name: string,
    +age: number
}>;

initialPersonState.js

// @flow

import type { PersonState } from './PersonState';

const initialPersonState: PersonState = {
    name: '',
    age: 0
}
    
export default initialPersonState;

ModifyPersonAgeAction.js

// @flow

import { AbstractAction } from 'oo-redux-utils';
import type { PersonState } from './PersonState';
    
export default class ModifyPersonAgeAction extends AbstractAction<PersonState> {
  newAge: number;

  constructor(newAge: number) {
    super();
    this.newAge = newAge;
  }

  performActionAndReturnNewState(currentState: PersonState): PersonState {
    return {
      ...currentState,
      age: this.newAge
    };
  }
}

Create state reducer

// @flow

import { createStore, combineReducers } from 'redux';
import { OOReduxUtils } from 'oo-redux-utils';
import initialPersonState from './initialPersonState';

const appStateReducer = combineReducers({
    personState: OOReduxUtils.createStateReducer(initialPersonState, AbstractAction<PersonState>);
});

export default createStore(
  appStateReducer,
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
);

Create app state type

// @flow

import type { PersonState } from './PersonState'

export type AppState = {
    personState: PersonState
};

Use person state in React component

PersonView.js

// @flow

import React from 'react'
import { connect } from 'react-redux';
import { OOReduxUtils } from 'oo-redux-utils';
import type { DispatchWrapper } from 'oo-redux-utils'
import ModifyPersonAgeAction from './ModifyPersonAgeAction';

type MappedState = PersonState;
    
const mapAppStateToComponentProps = (appState: AppState): MappedState
    => OOReduxUtils.mergeOwnAndForeignState(appState.personState, {});

type Props = MappedState & DispatchWrapper;

class PersonView extends React.Component<Props, {}> {
    
    modifyPersonAge = (newAge: number) => {
        const { dispatch } = this.props;
        dispatch({ type: new ModifyPersonAgeAction(newAge)});
    };
    
    .
    .
    
    render() {
        .
        <.... onChange={this.modifyPersonAge} ... />
        .
    }
}

export default connect(mapAppStateToComponentProps)(PersonView);  

License

MIT License