Vue-use-reducer NPM

Vue useReducer

Inspired by useReducer of React Hooks.

Install

$ yarn add vue-use-reducer

Usage

Usage is the same as useReducer of React Hooks.

store

import { useReducer } from 'vue-use-reducer';

const initialState = {
  count: 0,
};

const reducer = (state, action) => {
  switch (action.type) {
    case 'increment':
      return {
        ...state,
        count: state.count + 1,
      };
    case 'decrement':
      return {
        ...state,
        count: state.count - 1,
      };
  }
};

const [state, dispatch] = useReducer(reducer, initialState);

export const counterState = state;
export const counterDispatch = dispatch;

component

<template>
  <div>
    <h1>Use Reducer Sample Counter</h1>

    <div>
      <span>{{ count }}</span>
    </div>
    <div>
      <button type="button" @click="increment">+1</button>
      <button type="button" @click="decrement">-1</button>
    </div>
  </div>
</template>

<script>
  import { counterState, counterDispatch } from '@/store/counter';

  export default {
    computed: {
      count() {
        return counterState.count;
      },
    },

    methods: {
      increment() {
        counterDispatch({ type: 'increment' });
      },

      decrement() {
        counterDispatch({ type: 'decrement' });
      },
    },
  };
</script>