https://github.com/pksilen/oo-redux-utils

Utility functions for Object-oriented Redux
https://github.com/pksilen/oo-redux-utils

object-oriented react reactjs redux

Last synced: about 1 month ago
JSON representation

Utility functions for Object-oriented Redux

• Host: GitHub
• URL: https://github.com/pksilen/oo-redux-utils
• Owner: pksilen
• License: mit
• Created: 2019-09-29T07:21:11.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-18T20:13:56.000Z (about 1 year ago)
• Last Synced: 2024-11-15T17:28:02.631Z (about 2 months ago)
• Topics: object-oriented, react, reactjs, redux
• Language: JavaScript
• Size: 1.53 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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]

[![version][version-badge]][package]

[![build][build]][circleci]

[![coverage][coverage]][codecov]

[![MIT License][license-badge]][license]

## Prerequisites

    "react": "^16.0.0",

    "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

    }>;

    

personStateReducer.js

    

    // @flow

    

    import OOReduxUtils from 'oo-redux-utils';

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

    

    const initialPersonState: PersonState = {

        name: '',

        age: 0

    }

    

    export default OOReduxUtils.createStateReducer(initialPersonState, AbstractAction)

ModifyPersonAgeAction.js

    

    // @flow

   

    import { AbstractAction } from 'oo-redux-utils';

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

        

    export default class ModifyPersonAgeAction extends AbstractAction {

      newAge: number;

    

      constructor(newAge: number) {

        super();

        this.newAge = newAge;

      }

    

      performActionAndReturnNewState(currentState: PersonState): PersonState {

        return {

          ...currentState,

          age: this.newAge

        };

      }

    }

### Create app state type

AppState.js

    

    // @flow

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

    

    export type AppState = $Exact<{

        personState: PersonState

    }>;

    

### Create state store

store.js

    // @flow

    import { createStore, combineReducers } from 'redux';

    import type { Action, Store } from 'redux';

    import type { AppState } from AppState';

    

    const appStateReducer: (AppState | void, Action>) => AppState = combineReducers({

        personState: personStateReducer;

    });

    

    export default (createStore(

      appStateReducer,

      window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

    ): Store>);

    

### Use person state in React component

PersonComponent.js

    // @flow

    

    import React from 'react';

    import { connect } from 'react-redux';

    import OOReduxUtils, { AbstractComponent } 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 OwnProps = {};

    type Props = $Exact<{ ...MappedState, ...DispatchWrapper };

    

    class PersonComponent extends AbstractComponent {

        

        modifyPersonAge = (newAge: number) => {

            this.dispatchAction(new ModifyPersonAgeAction(newAge));

        };

        

        .

        .

        

        render() {

            .

            

            .

        }

    }

    

    export default connect(mapAppStateToComponentProps)(PersonComponent);  

## Full example

See [oo-redux-utils-flow-test-app]

  

## License

MIT License

[license-badge]: https://img.shields.io/badge/license-MIT-green

[license]: https://github.com/pksilen/oo-redux-utils/blob/master/LICENSE

[version-badge]: https://img.shields.io/npm/v/oo-redux-utils.svg?style=flat-square

[package]: https://www.npmjs.com/package/oo-redux-utils

[build]: https://img.shields.io/circleci/project/github/pksilen/oo-redux-utils/master.svg?style=flat-square

[circleci]: https://circleci.com/gh/pksilen/oo-redux-utils/tree/master

[coverage]: https://img.shields.io/codecov/c/github/pksilen/oo-redux-utils/master.svg?style=flat-square

[codecov]: https://codecov.io/gh/pksilen/oo-redux-utils

[Replace using conditionals with Polymorphism]: https://sourcemaking.com/refactoring/replace-conditional-with-polymorphism

[oo-redux-utils-flow-test-app]: https://github.com/pksilen/oo-redux-utils-flow-test-app