https://github.com/lucasmrdt/react-nedux
🧲 React provider of nedux - the next react-redux
https://github.com/lucasmrdt/react-nedux
nedux nedux-provider react react-nedux react-state-management react-store state-management typescript
Last synced: 11 months ago
JSON representation
🧲 React provider of nedux - the next react-redux
- Host: GitHub
- URL: https://github.com/lucasmrdt/react-nedux
- Owner: lucasmrdt
- License: mit
- Created: 2019-12-05T23:47:23.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T02:27:42.000Z (about 3 years ago)
- Last Synced: 2025-01-30T12:17:05.861Z (12 months ago)
- Topics: nedux, nedux-provider, react, react-nedux, react-state-management, react-store, state-management, typescript
- Language: JavaScript
- Homepage:
- Size: 622 KB
- Stars: 1
- Watchers: 3
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React-Nedux - The `n`ext react-r`edux`
 [](https://www.npmjs.com/package/react-nedux) [](https://www.npmjs.com/package/react-nedux)
> The official React bindings for [nedux](https://github.com/lucasmrdt/nedux). Performant and flexible.
## 📦 Installation
```bash
npm install react-nedux --save
```
## 💻 Usage with examples
| Name | Source | Codesandbox |
| :----------: | :------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------: |
| ✅ Todo List | [here](https://github.com/lucasmrdt/nedux/tree/master/examples/todos) | [here](https://codesandbox.io/s/nedux-todos-nm8j0?fontsize=14&hidenavigation=1&theme=dark) |
| 🎛 Counter | [here](https://github.com/lucasmrdt/nedux/tree/master/examples/counter-nedux-vs-redux) | [here](https://codesandbox.io/s/counter-nedux-vs-redux-n34b2?fontsize=14&hidenavigation=1&theme=dark) |
## 📜 Documentation
### `Import`
```javascript
// 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](https://reactjs.org/docs/hooks-reference.html#usestate).
| argument | required | type | description |
| :------: | :------: | :-----------------------------------------------: | :---------------------------------------------------------------------------------------------------------- |
| `store` | ✅ | [Store](https://github.com/lucasmrdt/nedux#store) | The store created by [createStore](https://github.com/lucasmrdt/nedux#createstoreinitialstate-middlewares). |
### `useStore`
The `useStore` hook created by `createStoreHook` can be used as same as [useState](https://reactjs.org/docs/hooks-reference.html#usestate).
## 🎛 Basic Usage
> Feel free to test it [here](https://codesandbox.io/s/condescending-butterfly-u9lnf?fontsize=14&hidenavigation=1&theme=dark).
```tsx
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 (
you've clicked {counter} times
+
-
);
};
const rootElement = document.getElementById('root');
render(, rootElement);
```
## 🙋🏼 Contributions
All [Pull Requests](https://github.com/lucasmrdt/react-nedux/compare?expand=1), [Issues](https://github.com/lucasmrdt/react-nedux/issues) and [Discussions](https://github.com/lucasmrdt/react-nedux/issues) are welcomed !