recoildux
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 recoilduxUsage
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_minimaland open http://localhost:8080 in your web browser.