Git Product home page Git Product logo

xreducer's Introduction

xReducer npm version

Create Redux Reducers without switch statements or action objects. In short less boilerplate, more fun!

How To Install

yarn add xreducer

xReducer is just a set of javascript functions, and have literally zero hard dependencies! So you can right away use it in any Redux project along with existing reducers.

Why Do I Need This?

Redux is an awesome library, but it makes us write a lot of boilerplate - Action objects, action creators, switch statements..., and other repeating code while connecting the UI components to a Store.

What if we could avoid some of them, and create reducers from a set of simple functions / handlers / actions!?

Using With ReactJs

1. Reducer: Calling createReducer with a map of action handlers, and the initial state; would return a reducer function. You can then use this function with Redux like a conventional reducer.

// Reducer
import { createReducer } from 'xreducer';

const initialState = {
  count: 1
};

const reducer = createReducer({
  inc: state => ({ count: state.count + 1 }),
  dec: state => ({ count: state.count - 1 })
}, initialState);

export default reducer;

2. Connect Component: Use reducer.getActions in place of mapDispatchToProps while connecting, and all the actions will be available under props!

// React Component
import React from 'react';
import { connect } from 'react-redux';
import reducer from './reducer';

class Counter extends React.Component {
  render() {
    return <p>
      {this.props.count}
      <button onClick={this.props.inc}>Inc</button>
    </p>
  }
}

export default connect(state => state, reducer.getActions)(Counter);

Thats it. Isn't that simple!? ๐Ÿ˜Ž

Action Types

xReducer supports 3 types of action handlers. Default is action().

  1. action((state, payload) => {}, options) - Executes inside the reducer and manages state.
  2. func((actions, getReducerState, payload, helpers) => {}, options) - Executes outside, for side effects logic without dispatch.
  3. reduxThunk((actions, getState, payload, helpers) => {}, options) - For side effects logic with dispatch (Needs redux-thunk middleware).

Supported Features

I am trying my best to improve the documentation. But until then, the UTs must give you a sound idea about xReducer APIs and supported features.

Unit Tests for some interesting features:

  1. Reducer composition
  2. Immer support
  3. Persisting data using localStorage
  4. Debouncing actions
  5. Thunk support

Contributions & Bug Report

  • Do you have an enhancement in mind? Or found a bug? Please create a new issue for the same in xReducer issues page.
  • And always, feel free to submit a Pull Request with the changes you would like to see.

License

This project is licensed under the MIT license. See the LICENSE file for more info.

xreducer's People

Contributors

sreenaths avatar

Stargazers

 avatar

Watchers

 avatar  avatar  avatar

xreducer's Issues

Create docs

Current README and UTs are insufficient to effectively convey all that we can do with xReducer. We need proper documentation of the APIs, recipes, running UTs etc..

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.