Git Product home page Git Product logo

nenjotsu / advanced-redux-pattern Goto Github PK

View Code? Open in Web Editor NEW
11.0 2.0 0.0 1.71 MB

Advanced redux pattern for handling multiple sub dispatch, reusable middleware and scalable redux for large application.

Home Page: https://codesandbox.io/s/github/nenjotsu/advanced-redux-pattern

HTML 10.10% JavaScript 87.21% CSS 2.69%
redux redux-observable middleware react advanced redux-actions cancellable

advanced-redux-pattern's Introduction

advanced-redux-pattern

Advanced redux pattern for handling multiple sub dispatch, reusable middleware and scalable redux for large application.

Live Demo

Edit advanced-redux-pattern

Inspiration Advanced Redux Patterns - Nir Kaufman @ ReactNYC

alt text

Features:

  • State management using redux
  • Reusable Ajax Request as dispatch using rxjs & redux-observables for side effects
  • Cancellable Request, in ComponentWillUnmount or manual cancel request
  • Single Source of Data Flow as Middleware for sub dispatch and multiple dispatch
  • Action Creators using redux-actions
  • UI Library using ant-design
  • Readable Action Types in redux-dev-tools
  • Implement Folder Structure for Containers & Components
  • Api Error handling in single pipeline
  • Tutorial @medium article

Why do you need a sub dipatch

For instance you will need to maintain the flow of dispatch in separate folder, to adhere the separation of concerns and debugging purposes, the component will remain clean and not cluttered of multiple or series of this.props.getEpicOne(), this.props.getEpicTwo(), here are reasons why:

  • clean and not cluttered dispatch inside a component
  • easy to debug the side effects in multiple requests
  • manageable flow dispatch to handle multiple dispatch and ajax request
  • dispatch a regular actions alongside with the actions with side effects
  • debuggable flow where/when you start the spinner (loading) and where to stop it
  • reusable dispatch for ajax request, ui, or master data
  • scalable redux and open for extension once you want to use other middleware like redux-saga, co-existing or even while you are implementing a new technology for a specific module/usecase.

TODOs

  • Implement reselect for memoizing redux state

For more question follow me

advanced-redux-pattern's People

Contributors

nenjotsu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.