https://github.com/dai-shi/recoildux

[NOT MAINTAINED] Recoil inspired implementation with Redux
https://github.com/dai-shi/recoildux

Last synced: 19 days ago
JSON representation

[NOT MAINTAINED] Recoil inspired implementation with Redux

• Host: GitHub
• URL: https://github.com/dai-shi/recoildux
• Owner: dai-shi
• License: mit
• Created: 2020-05-18T13:10:20.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T18:18:02.000Z (almost 2 years ago)
• Last Synced: 2024-05-12T13:41:20.473Z (6 months ago)
• Language: TypeScript
• Homepage:
• Size: 1.98 MB
• Stars: 16
• Watchers: 3
• Forks: 0
• Open Issues: 23
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# recoildux

[![Build Status](https://travis-ci.com/dai-shi/recoildux.svg?branch=master)](https://travis-ci.com/dai-shi/recoildux)

[![npm version](https://badge.fury.io/js/recoildux.svg)](https://badge.fury.io/js/recoildux)

[![bundle size](https://badgen.net/bundlephobia/minzip/recoildux)](https://bundlephobia.com/result?p=recoildux)

Recoil inspired implementation with Redux

## Introduction

I have been developing an unofficial React Redux library

called [reactive-react-redux](https://github.com/dai-shi/reactive-react-redux).

Its v5 is implemented with useMutableSource and

it no longer depends on React Context.

Now, [Recoil](https://recoiljs.org) 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

```bash

npm install recoildux

```

## Usage

```javascript

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 (

    


      {Math.random()}

      


        Count: {count}

         setCount(count + 1)}>+1

         setCount((c) => c - 1)}>-1

      

    

  );

};


const TextBox = () => {

  const [text, setText] = useRecoilState(textAtom);

  return (

    


      {Math.random()}

      


        Text: {text}

         setText(event.target.value)} />

      

    

  );

};


const App = () => (

  <>

    
Counter

    

    

    
TextBox

    

    

  >

);


ReactDOM.unstable_createRoot(document.getElementById('app')).render();

```

## API

## Examples

The [examples](examples) folder contains working examples.

You can run one of them with

```bash

PORT=8080 npm run examples:01_minimal

```

and open  in your web browser.

You can also try them in codesandbox.io:

[01](https://codesandbox.io/s/github/dai-shi/recoildux/tree/master/examples/01_minimal)

[02](https://codesandbox.io/s/github/dai-shi/recoildux/tree/master/examples/02_typescript)