Skip to content

dai-shi/recoildux

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

recoildux

Build Status npm version bundle size

Recoil inspired implementation with Redux

Introduction

I have been developing an unofficial React Redux library called reactive-react-redux. Its v5 is implemented with useMutableSource and it no longer depends on React Context.

Now, Recoil came and it's nice and scalable with the atom abstraction. It would be possible to implement the same idea with Redux. Conceptually, it's not well-known Redux because it's no longer single source of truth. The idea is a Redux store is an atom.

This isn't meant to provide a Recoil alternative, but as a comparison purpose, it provides a subset of the Recoil API.

Install

npm install recoildux

Usage

import React from 'react';
import ReactDOM from 'react-dom';

import { atom, useRecoilState } from 'recoildux';

const countAtom = atom({ key: 'count', default: 0 });
const textAtom = atom({ key: 'text', default: 'hello' });

const Counter = () => {
  const [count, setCount] = useRecoilState(countAtom);
  return (
    <div>
      {Math.random()}
      <div>
        <span>Count: {count}</span>
        <button type="button" onClick={() => setCount(count + 1)}>+1</button>
        <button type="button" onClick={() => setCount((c) => c - 1)}>-1</button>
      </div>
    </div>
  );
};

const TextBox = () => {
  const [text, setText] = useRecoilState(textAtom);
  return (
    <div>
      {Math.random()}
      <div>
        <span>Text: {text}</span>
        <input value={text} onChange={(event) => setText(event.target.value)} />
      </div>
    </div>
  );
};

const App = () => (
  <>
    <h1>Counter</h1>
    <Counter />
    <Counter />
    <h1>TextBox</h1>
    <TextBox />
    <TextBox />
  </>
);

ReactDOM.unstable_createRoot(document.getElementById('app')).render(<App />);

API

Examples

The examples folder contains working examples. You can run one of them with

PORT=8080 npm run examples:01_minimal

and open http://localhost:8080 in your web browser.

You can also try them in codesandbox.io: 01 02

About

Recoil inspired implementation with Redux

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published