redux-reactors

redux-reactors

A small library (~20 loc) for creating action/reducer combinations, also known as reactors.

Quickstart

Install the library

$ npm install redux-reactors --save

Add the store enhancer

import {reactorEnhancer} from 'redux-reactors';
import {createStore, compose} from 'redux';
// ...
const store = createStore(reducer, initialState, compose(reactorEnhancer, ...otherEnhancers));

Create reactors

import {createReactor} from 'redux-reactors';
export const incrementReactor = createReactor('INCREMENT', (state, action) => {
  return Object.assign({}, {
    counter: state.counter + action.payload,
    state,
  });
});

Use reactors in your components

import {incrementReactor} from './my-reactors';
import {connect} from 'react-redux';

function MyComponent(props) {
  const {increment, counter} = props;
  return (
    <div>
      <div>The count is {counter}</div>
      <button onClick={() => increment(1)}>Increment by one</button>
      <button onClick={() => increment(2)}>Increment by two</button>
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    counter: state.counter,
  };
};

// Since createReactor returns an action creator,
// you can use it easily with mapDispatchToProps
const mapDispatchToProps = {
  increment: incrementReactor,
};

export default connect(mapStateToProps, mapDispatchToProps)(MyComponent);