https://github.com/sixgramwater/redux-lite

A lightweight state management library for React
https://github.com/sixgramwater/redux-lite

library lightweight react react-redux redux state-management zustand

Last synced: about 1 month ago
JSON representation

A lightweight state management library for React

• Host: GitHub
• URL: https://github.com/sixgramwater/redux-lite
• Owner: sixgramwater
• Created: 2022-03-31T09:17:48.000Z (almost 3 years ago)
• Default Branch: master
• Last Pushed: 2022-04-01T08:52:35.000Z (almost 3 years ago)
• Last Synced: 2024-12-14T19:11:45.539Z (about 2 months ago)
• Topics: library, lightweight, react, react-redux, redux, state-management, zustand
• Language: TypeScript
• Homepage:
• Size: 260 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# redux-lite

> A lightweight state management library for react inspired by redux and react-redux

[![NPM](https://img.shields.io/npm/v/@sixgramwater/redux-lite)](https://www.npmjs.com/package/@sixgramwater/redux-lite) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash

npm install --save @sixgramwater/redux-lite

```

## Usage

### 1. create a single module

```jsx

// store/counter.ts

import { fetch } from "../api";

const counterState = {

  count: 0,

}

// A single module named: counter

const counter = {

  state: counterState,

  reducers: {

    addCounter({ state, payload }) {

      return {

        ...state,

        count: state.count + payload,

      }

    }

  },

  effects: {

    // create thunk in effects to dispatch async action

    asyncAddCounter({dispatch, state, payload}) {

      fetch(1000).then(value => {

        dispatch.counter.addCounter(payload);

      })  

    }

  }

}

```

### 2. setup modules and invoke `create()`

```jsx

// setup modules and invoke create()

const modules = { counter };

export const { useModule, dispatch, useSelector } = create(modules);

```

### 3. get selected state using `useSelector()` hook

```jsx

// App.jsx

import { useModule, dispatch, useSelector } from './store';

const App = () => {

  // const counterState = useModule('counter');

  // const count = counterState.count;

  const count = useSelector('counter', state => state.count);

  const handleClick = () => {

    dispatch.counter.addCounter(1);

  }

  const handleAsyncClick = () => {

    dispatch.counter.asyncAddCounter(1);

  }

  return (

    


      {count}

      increase

      Async increase

      

    

  )

}

```


## Api

### `create(modules)`

| Property | Description | Type |

| :----: | :----: | :----: |

| modules | A collection of registered modules | {string, Module} |

### `useSelector(moduleName, selector)`

| Property | Description | Type |

| :----: | :----: | :----: |

| moduleName | The name of the module used returns the corresponding status | string |

| selector | the selector function used to return the exact data you select | Function |

### `dispatch.{moduleName}.{fnName}(payload)`

| Property | Description | Type |

| :----: | :----: | :----: |

| moduleName | The specific module name of the call should be registered in create | string |

| fnName | The method name of the call module, reducer/effect | string |

| payload | The load value passed | object |

## License

MIT © [sixgramwater](https://github.com/sixgramwater)

---

This hook is created using [create-react-hook](https://github.com/hermanya/create-react-hook).