https://github.com/fkrasnowski/stateverse-react

Complementary package for Stateverse - painless manager for async state changes and side effects
https://github.com/fkrasnowski/stateverse-react

async react react-hooks side-effects state state-management typescript

Last synced: 17 days ago
JSON representation

Complementary package for Stateverse - painless manager for async state changes and side effects

• Host: GitHub
• URL: https://github.com/fkrasnowski/stateverse-react
• Owner: fkrasnowski
• License: mit
• Created: 2020-06-30T16:46:32.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2020-07-01T13:31:06.000Z (over 4 years ago)
• Last Synced: 2024-12-10T11:24:17.870Z (22 days ago)
• Topics: async, react, react-hooks, side-effects, state, state-management, typescript
• Language: TypeScript
• Homepage:
• Size: 6.84 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# stateverse-react ⚛👩‍🚀

Complementary package for [Stateverse](https://github.com/fkrasnowski/stateverse) - painless manager for async state changes and side effects

## Installation

```sh

# npm

npm i --save stateverse-react

# yarn

yarn add stateverse-react

```

`stateverse-react` is the same as regular **Stateverse** with a difference at introducing the `useWatch` hook that synchronises state changes with component re-renders

### Example

```jsx

import { useWatch, createStore } from 'stateverse-react';

const counter = createStore(0)

  .addReducers({

    add: (state, v) => state + v,

    sub: (state, v) => state - v,

    reset: () => 0,

  })

  .addEffects({

    countDownFx: async (reducers, cleanup) => {

      const interval = setInterval(() => {

        if (counter.state > 0) reducers.sub(1);

        else clearInterval(interval);

      }, 1000);

      cleanup(() => {

        clearInterval(interval);

      });

    },

  });

const Counter = () => {

  useWatch(counter);

  return 
{counter.state}
;

};

```


See [Stateverse](https://github.com/fkrasnowski/stateverse) for full documentation