use-rematch-reducer

<p> <img alt="Version" src="https://img.shields.io/github/package-json/v/jiangweixian/use-rematch-reducer/master?label=use-rematch-reducer&logo=npm&style=for-the-badge" /> <a href="#" target="_blank"> <img alt="License: MIT" src="https://img.shiel

Usage no npm install needed!

<script type="module">
  import useRematchReducer from 'https://cdn.skypack.dev/use-rematch-reducer';
</script>

README

use-rematch-reducer

Version License: MIT Twitter: jiangweixian

Features

  • typescript typo supported by rematch
  • async dispatch

Install

npm install use-rematch-reducer --save

Usage

screenshots

// import
import { useRematchReducer } from 'use-rematch-reducer';

// create hook in compnent
const [state, dispatch] = useRematchReducer({
  name: 'use-rematch-reducer',
  state: {
    cnt: 0,
    loading: false,
  },
  reducers: {
    add: (state: State, payload?: number) => {
      return {
        ...state,
        cnt: payload ? state.cnt + payload : state.cnt + 1,
      };
    },
    toggleLoading: (state: State) => {
      return {
        ...state,
        loading: !state.loading,
      };
    },
  },
  effects: {
    async asyncAdd(payload: number, state: State) {
      this.toggleLoading();
      setTimeout(async () => {
        this.add(payload);
        this.toggleLoading();
      }, 1000);
    },
  },
});

// use in component
<div>
  <a style={{ marginRight: '16px' }} onClick={() => dispatch.add()}>
    add
  </a>
  <a style={{ marginRight: '16px' }} onClick={() => dispatch.asyncAdd(1)}>
    async add after 1s
  </a>
  <a style={{ marginRight: '16px' }} onClick={() => dispatch.add(-1)}>
    reduce
  </a>
</div>

see full code in examples

TODO

  • - add test part

Author

👤 JW

Show your support

Give a ⭐️ if this project helped you!

This README was generated with ❤️ by readme-md-generator