❤
npm
Sign UpSign In

with-rematch

1.0.10 • Public • Published

with-rematch

🕶 A HoC that implement reducer a la Rematch

Inpired By Rematch.js ♡

Instalation

npm install -g with-rematch
or
yarn add with-rematch

Getting Started

Step 1: Model

const model = {
  state: 0,
  reducers: {
    increment(state, payload, props) {
      console.log(state); // the state
      console.log(payload); // the payload passed via action
      console.log(props); // component props
      return state + (payload || 1);
    },
    decrement(state, payload, props) {
      return state - (payload || 1);
    }
  },
  effects: actions => ({
    async asyncIncrement(payload, state, props) {
      await new Promise(resolve => setTimeout(resolve, 1000));
      actions.increment();
    }
  }),
  lifecycle: {
    componentDidMount() {
      console.log('componentDidMount', this);
    }
  }
};

Understanding models is as simple as answering a few questions:

  1. What is my initial state? state
  2. How do I change the state? reducers
  3. How do I handle async actions? effects with async/await

Step 2: HoC Props (state, actions)

Actions is how we trigger reducers & effects in your models. actions props standardizes your actions without the need for writing action types or action creators.

// reducers
actions.increment();
actions.increment(5);
actions.decrement(2);
 
// effects
actions.asyncIncrement(10);
const Counter = ({state, actions}) => (
  <div>
    Value: {state}
    <button onClick={actions.increment}>INCREMENT</Button>
    <button onClick={actions.decrement}>DENCREMENT</button>
 
    <button onClick={actions.asyncIncrement}>ASYNC INCREMENT</button>
    <button onClick={() => actions.increment(5)}>INCREMENT 5</Button>
  </View>
);
 
export default withRematch(model)(Counter);
 

Step 3: Lifecycle

TODO

Complete Example

import withRematch from 'with-rematch';
 
const model = {
  state: 0,
  reducers: {
    increment(state, payload, props) {
      console.log(state);   // the state
      console.log(payload); // the payload passed via action
      console.log(props);   // component props
      return state + (payload || 1);
    },
    decrement(state, payload, props) {
      return state - (payload || 1);
    }
  },
  effects: actions => ({
    async asyncIncrement(payload, state, props) {
      await new Promise(resolve => setTimeout(resolve, 1000));
      actions.increment();
    }
  }),
  lifecycle: {
    componentDidMount() {
      console.log('componentDidMount', this);
    }
  }
};
 
const Counter = ({state, actions}) => (
  <div>
    Value: {state}
    <button onClick={actions.increment}>INCREMENT</Button>
    <button onClick={actions.decrement}>DENCREMENT</button>
 
    <button onClick={actions.asyncIncrement}>ASYNC INCREMENT</button>
    <button onClick={() => actions.increment(5)}>INCREMENT 5</Button>
  </View>
);
 
export default withRematch(model)(Counter);

Readme

Keywords

Package Sidebar

Install

npm i with-rematch

Repository

github.com/russiann/with-rematch

Homepage

github.com/russiann/with-rematch#readme

Weekly Downloads

1

Version

1.0.10

License

MIT

Unpacked Size

95.5 kB

Total Files

6

Last publish

Collaborators

  • russiann
Try on RunKit
Report malware