React-Nedux - The next react-redux

The official React bindings for nedux. Performant and flexible.

📦 Installation

npm install react-nedux --save

💻 Usage with examples

| Name | Source | Codesandbox | | :----------: | :------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: | | ✅ Todo List | here | here | | 🎛 Counter | here | here |

📜 Documentation

Import

// ES6
import { createStoreHook } from 'react-nedux';

// ES5
var createStoreHook = require('react-nedux').createStoreHook;

createStoreHook(store)

Creates a Nedux hook with the same usage of useState.

| argument | required | type | description | | :------: | :------: | :-----------------------------------------------: | :---------------------------------------------------------------------------------------------------------- | | store | ✅ | Store | The store created by createStore. |

useStore

The useStore hook created by createStoreHook can be used as same as useState.

🎛 Basic Usage

Feel free to test it here.

import * as React from 'react';
import { render } from 'react-dom';
import { createStore } from 'nedux';
import { createStoreHook } from 'react-nedux';

const store = createStore({
  counter: 0,
});

const useStore = createStoreHook(store);

const increment = () => store.set('counter', prev => prev + 1);
const decrement = () => store.set('counter', prev => prev - 1);

const App = () => {
  const [counter] = useStore('counter');

  return (
    <span>
      <p>you've clicked {counter} times</p>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
    </span>
  );
};

const rootElement = document.getElementById('root');
render(<App />, rootElement);

🙋🏼 Contributions

All Pull Requests, Issues and Discussions are welcomed !