🪢 World's Simplest React State Manager

南小北

Last update: Dec 30, 2022

Overview

🪢 resso

World's Simplest React State Manager

(React 18, React Native, SSR, Mini Apps)

Reactive shared store of React. No more extra re-render

English · 简体中文

Introduction

resso, world’s simplest React state manager →

Features

Extremely simple 🪩
Extremely smart 🫙
Extremely small 🫧

Install

pnpm add resso
# or
yarn add resso
# or
npm i resso

Usage

import resso from 'resso';

const store = resso({ count: 0, text: 'hello' });

function App() {
  const { count } = store; // destructure at top first 🥷
  return (
    <>
      {count}
      <button onClick={() => store.count++}>+</button>
    </>
  );
}

API

import resso from 'resso';

const store = resso({
  count: 0,
  inc: async () => {
    const { count } = store; // destructure at top first, also 🥷

    store.count = count + 1; // directly assign
    store('count', (prev) => prev + 1); // or an updater funtion
  },
});

// store data are injected by useState, so please ensure to destructure first,
// top level in a component (Hooks rules), then use, or may get React warning
function App() {
  const { count, inc } = store;
  // other component code below ...
}

// For react<18, to use batch updating:
resso.config({ batch: ReactDOM.unstable_batchedUpdates }); // at app entry

Re-render on demand

const store = resso({
  count: 0,
  text: 'hello',
  inc: () => store.count++,
});

// No text update, no re-render
function Text() {
  const { text } = store;
  return <p>{text}</p>;
}

// Only count update, re-render
function Count() {
  const { count } = store;
  return <p>{count}</p>;
}

// No data in view, no re-render
function Control() {
  const { inc } = store;
  return (
    <>
      <button onClick={inc}>+</button>
      <button onClick={() => store.count--}>-</button>
    </>
  );
}

License

MIT License (c) nanxiaobei

FUTAKE

Try FUTAKE in WeChat. A mini app for your inspiration moments. 🌈

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

7.9k Dec 30, 2022

A Soundcloud client built with React / Redux

SoundRedux NOTE It seems that SoundCloud has revoked my api client keys without any explanation or warning. Running the app locally no longer works un

5k Dec 22, 2022

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:

6 Aug 21, 2021

Recipe Catalogue is a React & Redux web app based on a catalog of recipes.

Recipe Catalogue is a React & Redux web app based on a catalog of recipes. It contains a browsable list of meals that you can filter by category or type and access to one meal recipe. The data is retrieved from [Meals DB (https://www.themealdb.com/api.php) and then stored in the Redux store.

13 Oct 19, 2022

The ultimate React SSR, Redux-powered example.

Redux server-side The ultimate React SSR, Redux-powered example. But why? Does any of the following sentences describe your SSR adventures? You'd love

3 Aug 20, 2021

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

27 Dec 10, 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

11 Jul 10, 2022

A sample React TypeScript Redux Toolkit CRUD app

19 Dec 23, 2022

Redux-Toolkit example with React Hooks CRUD Application, Axios, Rest API, Bootstrap

70 Jan 5, 2023

Comments

limitation of resso

I found below snippet would not work:

import { useState } from 'react';
import resso from 'resso';

// 🪢 resso
// https://github.com/nanxiaobei/resso

const store = resso({
  count: 0,
  text: 'hello',
  inc: () => store.count++,
});

function App() {
  const [i, setI] = useState(0);

  if (i % 2 === 1) {
    return <div>i === {i}</div>;
  }

  return (
    <>
      <div>{store.count}</div>
      <button
        onClick={() => {
          store.inc();
          setI(i + 1);
        }}
      >
        inc
      </button>
    </>
  );
}

export default App;

Check codesandbox.

It will cause the error Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

We can change it a little bit as below:

import { useState } from 'react';
import resso from 'resso';

// 🪢 resso
// https://github.com/nanxiaobei/resso

const store = resso({
  count: 0,
  text: 'hello',
  inc: () => store.count++,
});

function App() {
  const { count } = store;
  const [i, setI] = useState(0);

  if (i % 2 === 1) {
    return <div>i === {i}</div>;
  }

  return (
    <>
      <div>{count}</div>
      <button
        onClick={() => {
          store.inc();
          setI(i + 1);
        }}
      >
        inc
      </button>
    </>
  );
}

export default App;

The user should eject the value from store before any of condition statement.

I suggest to put such info as notice/usage-limitation in readmd, so that users are able to avoid such issue

opened by leftstick 5

求教：如何写计算属性呢
const store = resso({ count: 0, get double() { return this.count * 2; }, });

我是这么写的，但是 double 不会更新 https://codesandbox.io/s/headless-wind-u6v73m?file=/src/App.js
opened by nilzhao 2
Nested objects?
Hey,

First of all great job :)

just have a question about nested object like this one:

const store = resso({ user: { info: { count: 0, } }, inc: () => store.user.info.count++, }); function Control() { const { inc } = store; return ( <> <p>{store.user.info.count}</p> <button onClick={inc}>-</button> </> ); }

Maybe this line https://github.com/nanxiaobei/resso/blob/main/src/index.ts#L31 should be some recursive function? I'm not so good so ... I don't have any PR or suggestions ... just try to learn :) Thanks in advance!
opened by lgabv 1
example project

Extremely great job. I like your repo very much. So that I created an example for it: https://github.com/leftstick/react-resso-memory-game.

Will you put it in your readme for others as a reference? That would be nice.

Thanks for your nice work

opened by leftstick 1