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 |
|---|---|---|
|
|
here | here |
|
|
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 !
