react-nedux

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 !