https://github.com/distolma/immer-svelte

https://github.com/distolma/immer-svelte

Last synced: 16 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/distolma/immer-svelte
• Owner: distolma
• License: mit
• Created: 2020-03-26T08:28:55.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-05T17:16:18.000Z (almost 2 years ago)
• Last Synced: 2024-10-23T02:09:37.706Z (21 days ago)
• Language: JavaScript
• Size: 470 KB
• Stars: 4
• Watchers: 1
• Forks: 1
• Open Issues: 18
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# immer-svelte

[![npm version](https://badge.fury.io/js/immer-svelte.svg)](https://www.npmjs.com/package/immer-svelte)

[![Build Status](https://travis-ci.com/distolma/immer-svelte.svg?branch=master)](https://travis-ci.com/distolma/immer-svelte)

## Installation

```sh

npm i -S immer immer-svelte

```

or

```sh

yarn add immer immer-svelte

```

## API

#### useImmer

The function returns a tuple, the first value of the tuple is the current state, the second is the updater function,

which accepts an [immer producer function](https://github.com/mweststrate/immer#api), in which the `draft` can be mutated freely, until the producer ends and the changes will be made immutable and become the next state.

```html

  import { useImmer } from "immer-svelte";

  const [state, updateState] = useImmer({ count: 0 });

  function increase() {

    updateState(draft => {

      draft.count++;

    });

  }

Count: {$state.count}

Increase

```


#### useImmerReducer

```html

  import { useImmerReducer } from "immer-svelte";

  const initialState = { count: 0 };

  function reducer(draft, action) {

    switch (action.type) {

      case "reset":

        return initialState;

      case "increment":

        return void draft.count++;

      case "decrement":

        return void draft.count--;

    }

  }

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



  Count: {$state.count}

   dispatch({ type: "reset" })}>Reset

   dispatch({ type: "increment" })}>+

   dispatch({ type: "decrement" })}>-



```