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

Overview

redux-lite

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

NPM JavaScript Style Guide

Install

npm install --save @sixgramwater/redux-lite

Usage

1. create a single module

{ dispatch.counter.addCounter(payload); }) } } }">
// 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()

// setup modules and invoke create()
const modules = { counter };
export const { useModule, dispatch, useSelector } = create(modules);

3. get selected state using useSelector() hook

// 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 (
    <div>
      {count}
      <button onClick={handleClick}>increase</button>
      <button onClick={handleAsyncClick}>Async increase</button>
      
    </div>
  )
}

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


This hook is created using create-react-hook.

You might also like...
Selector library for Redux

Reselect Simple “selector” library for Redux (and others) inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskat

A simple app for study react with redux, redux saga and typescript.

React com Redux, Redux-Saga e TypeScript. 🚀 Uma aplicação simple para entender o funcionamento do Redux e a melhor maneira de utiliza-lo junto com o

Redux - Create forms using Redux And React
Redux - Create forms using Redux And React

Exercício de fixação Vamos criar formulários utilizando Redux! \o/ Antes de inic

A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor
A chart monitor for Redux DevTools https://www.npmjs.com/package/redux-devtools-chart-monitor

Redux DevTools Chart Monitor This package was merged into redux-devtools monorepo. Please refer to that repository for the latest updates, issues and

An i18n solution for React/Redux and React Native projects
An i18n solution for React/Redux and React Native projects

redux-react-i18n An i18n solution with plural forms support for Redux/React Workers of all countries, unite! Supported languages list with expected co

Ruthlessly simple bindings to keep react-router and redux in sync

Project Deprecated This project is no longer maintained. For your Redux - Router syncing needs with React Router 4+, please see one of these librari

Front-end of the movie application created with React.js and Redux
Front-end of the movie application created with React.js and Redux

# Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run:

This command line helps you create components, pages and even redux implementation for your react project
This command line helps you create components, pages and even redux implementation for your react project

react-help-create This command line helps you create components, pages and even redux implementation for your react project. How to install it? To ins

Single page application for tracking cryptocurrencies. Includes sorting, animations, graphs and more. Made using React & Redux.
Single page application for tracking cryptocurrencies. Includes sorting, animations, graphs and more. Made using React & Redux.

Crypto Tracker A single page application meant to keep track of the most popular crypto currencies status. The user can sort the coins by highest gain

Owner
null
A simple, lightweight library for managing navigation history in React and Redux

?? Beta version ⚛ Redux history made easy! A simple, lightweight library for managing navigation history in React and Redux. Used in production by Uti

Isis☕Caffe 5 Jul 23, 2022
A Higher Order Component using react-redux to keep form state in a Redux store

redux-form You build great forms, but do you know HOW users use your forms? Find out with Form Nerd! Professional analytics from the creator of Redux

Redux Form 12.6k Sep 22, 2022
redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state.

redux-immutable redux-immutable is used to create an equivalent function of Redux combineReducers that works with Immutable.js state. When Redux creat

Gajus Kuizinas 1.9k Sep 25, 2022
In this course you learn how to use Redux as a state manager in your React applications

Redux is a state manager which you can use it in your React, Vue and even Vanilla applications. In this course we store Redux storage in localstorage to keep our data.

AmirHossein Mohammadi 5 Jul 25, 2022
:recycle: higher order reducer to add undo/redo functionality to redux state containers

redux undo/redo simple undo/redo functionality for redux state containers Protip: Check out the todos-with-undo example or the redux-undo-boilerplate

Daniel Bugl 2.8k Sep 24, 2022
Redux Tutorial - share my experience regarding redux, react-redux and redux-toolkit

Redux Tutorial 1. Introduction to Redux 1.1 What is Redux & why Redux? A small JS Library for managing medium/large amount of states globally in your

Anisul Islam 29 Sep 29, 2022
Manage the state of your React app with ease

@spyna/react-store React app state management that uses a storage Demo https://spyna.github.io/react-store/ Install npm install --save @spyna/react-st

Lorenzo Spinelli 46 Jan 19, 2021
A light-weight state manager.

Rectx a light-weight state manager with mutable api. 安装 npm install --save rectx 又一个轮子? Redux 和 Mobx 都非常的棒,但对于大部分项目都只是 CRUD 的项目来说,这些个玩意儿都略显太重了。而且对于 re

ZhengFang 176 May 21, 2022
Create the next immutable state by mutating the current one

Immer Create the next immutable state tree by simply modifying the current tree Winner of the "Breakthrough of the year" React open source award and "

immer 23.7k Sep 30, 2022
Skeleton React App configured with Redux store along with redux-thunk, redux persist and form validation using formik and yup

Getting Started with React-Redux App Some Configrations Needed You guys need to modify the baseUrl (path to your server) in the server.js file that is

Usama Sarfraz 11 Jul 10, 2022