Vue useReducer

Inspired by useReducer of React Hooks.

Install

for Vue v3

The following command installs vue-use-reducer v2.

$ yarn add vue-use-reducer@next
// or
$ npm i vue-use-reducer@next

for Vue v2

The following command installs vue-use-reducer v1.

$ yarn add vue-use-reducer
// or
$ npm i vue-use-reducer

You can install v2 using the following command.
When using with vue v2 it depends on the @vue/composition-api.

$ yarn add vue-use-reducer@next @vue/composition-api
// or
$ npm i vue-use-reducer@next @vue/composition-api

note: vue-use-reducer has no functional difference between v1 and v2.
Only the type is different. In v2, the namespace that was in v1 is gone. See examples for details

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>

Contribution

If you find a bug or want to contribute to the code or documentation, you can help by submitting an issue or a pull request.

License

MIT

mya-ake / vue-use-reducer