项目作者: lucasmrdt

项目描述 :
🧲 React provider of nedux - the next react-redux
高级语言: JavaScript
项目地址: git://github.com/lucasmrdt/react-nedux.git
创建时间: 2019-12-05T23:47:23Z
项目社区:https://github.com/lucasmrdt/react-nedux

开源协议:MIT License

下载


React-Nedux - The next react-redux

typescript version size

The official React bindings for nedux. Performant and flexible.

📦 Installation

  1. npm install react-nedux --save

💻 Usage with examples

Name Source Codesandbox
✅ Todo List here here
🎛 Counter here here

📜 Documentation

Import

  1. // ES6
  2. import { createStoreHook } from 'react-nedux';
  3. // ES5
  4. 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.

  1. import * as React from 'react';
  2. import { render } from 'react-dom';
  3. import { createStore } from 'nedux';
  4. import { createStoreHook } from 'react-nedux';
  5. const store = createStore({
  6. counter: 0,
  7. });
  8. const useStore = createStoreHook(store);
  9. const increment = () => store.set('counter', prev => prev + 1);
  10. const decrement = () => store.set('counter', prev => prev - 1);
  11. const App = () => {
  12. const [counter] = useStore('counter');
  13. return (
  14. <span>
  15. <p>you've clicked {counter} times</p>
  16. <button onClick={increment}>+</button>
  17. <button onClick={decrement}>-</button>
  18. </span>
  19. );
  20. };
  21. const rootElement = document.getElementById('root');
  22. render(<App ></App>, rootElement);

🙋🏼 Contributions

All Pull Requests, Issues and Discussions are welcomed !