hodux - npm Package Compare versions

Comparing version 1.0.1 to 1.0.2

dist/connect.d.ts

 import { Config, Selector, InferableComponentEnhancerWithProps } from './types';
 /**
- * Connects a React class component to some hodux store.
+ * A HOC wrapper of `useSelector` to connect store state to class components.
  *
@@ -5,0 +5,0 @@ * connect accepts two parameters:

dist/index.esm.js

@@ -230,3 +230,3 @@ import { observable, observe, unobserve } from '@nx-js/observer-util';
 /**
- * A hook to access the state of a hodux store.
+ * Extracts state from store as needed, the components will **re-render only if the selected state changes**
  *
@@ -233,0 +233,0 @@ * useSelector accepts two parameters:

dist/index.js

@@ -237,3 +237,3 @@ 'use strict';
 /**
- * A hook to access the state of a hodux store.
+ * Extracts state from store as needed, the components will **re-render only if the selected state changes**
  *
@@ -240,0 +240,0 @@ * useSelector accepts two parameters:

dist/useSelector.d.ts

 import { Config, Selector, UnwrapValue } from './types';
 /**
- * A hook to access the state of a hodux store.
+ * Extracts state from store as needed, the components will **re-render only if the selected state changes**
  *
@@ -5,0 +5,0 @@ * useSelector accepts two parameters:

package.json

 {
   "name": "hodux",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "The reactivity state management for React",
@@ -34,2 +34,6 @@ "main": "dist/index.js",
   },
+  "files": [
+    "dist",
+    "src"
+  ],
   "devDependencies": {
@@ -36,0 +40,0 @@ "@testing-library/dom": "^6.4.1",

README.md

@@ -1,3 +0,5 @@
-# hodux
+English | [简体中文](./README.zh-CN.md)
 
+# Hodux
+
 [![NPM version](https://img.shields.io/npm/v/hodux.svg?style=flat)](https://npmjs.org/package/hodux)
@@ -10,5 +12,5 @@ [![Build Status](https://img.shields.io/travis/react-kit/hodux.svg?style=flat)](https://travis-ci.org/react-kit/hodux)
 
-The reactivity state management for React. Made with :heart: and ES6 Proxies.
+The reactivity state management for React. Made with :heart: and ES6 Proxy API.
 
-> Inspired by [react-easy-state](https://github.com/solkimicreb/react-easy-state) but use friendly APIs for React Hooks.
+> Inspired by [react-easy-state](https://github.com/solkimicreb/react-easy-state) but more friendly for React Hooks.
 
@@ -19,3 +21,3 @@ ## Features
 - **State selectable**: extract state as needed, the components will not re-render unless any selected state changes.
-- **Perfectly typescript support**.
+- **Perfectly TypeScript support**.
 
@@ -27,6 +29,5 @@ ## Introduction
 ```js
-import React from 'react';
 import { store, useSelector } from 'hodux';
 
-// create observable store
+// create store(Observable)
 const counter = store({
@@ -37,6 +38,6 @@ num: 0,
 
-// select state from store
+// select state from store(Dependency collection)
 export default function Counter(props) {
   const num = useSelector(() => counter.num);
-  // or you can do some compute within component
+  // or you can do some compute in component
   // const total = useSelector(() => counter.num + props.step);
@@ -58,7 +59,8 @@
 
-### store(model)
+### `store(model)`
 
-Creates and returns a proxied observable object by the passed model(object), the original model object is not modified. It's just a wrapper of [observable()](https://github.com/nx-js/observer-util#proxy--observableobject).
+- Signature: `function store<M extends object>(model: M): M`
+- Description: creates and returns a proxied observable object by the passed model(object), the original model object is not modified. It's just a wrapper of [observable()](https://github.com/nx-js/observer-util#proxy--observableobject).
 
-create store object:
+create store with object-based model:
 
@@ -101,6 +103,20 @@ ```js
 
-### useSelector(selector, config?)
+local store(create store inner components):
 
-Extracts state from store as needed, **the components will re-render only if any selected state changes**, maybe it's the main difference with react-redux's useSelector(), because react-redux call selector when any store state changes even if not selected state at all(react-redux internal decides if makes re-render), so you do't need to use any cache selector library(such as reselect) with useSelector.
+> Maybe use native APIs(useState or useReducer) will be better, the goal of hodux is shared store between components.
 
+```js
+export default function Counter() {
+  const counter = store({ count: 0 });
+  const count = useSelector(() => counter.count);
+
+  return <div onClick={() => counter.count++}>{count}</div>;
+}
+```
+
+### `useSelector(selector, config?)`
+
+- Signature: `function useSelector<V>(selector: Selector<V>, config?: Config<V>): V`
+- Description: extracts state from store as needed, the components will **re-render only if the selected state changes**, maybe it's the main difference with react-redux's useSelector(), because react-redux call selector whenever store state changes even not selected at all(react-redux internal decides if makes re-render), so you do't need to use any cache selector library(such as reselect) with useSelector.
+
 `useSelector` accepts two parameters:
@@ -137,8 +153,24 @@
 
-### connect(selectorWithProps, config?)
+Select state from multiple stores:
 
-`connect` is a HOC wrapper of `useSelector` which only for class components to connect some store's state with the components.
+```js
+function CompWithMutlStore() {
+  // whenever the `count` from store1 or the `step` from store1 changes the compoent will re-render, so the `result` is always be the newest value
+	const result = useSelector(() => store1.count + store2.step);
+}
+```
 
-connect accepts two parameters:
+### `connect(selector, ownProps?)`
 
+```ts
+function connect<V extends {}, OwnProps = {}>(
+  selector: Selector<V, OwnProps>,
+  config?: Config<V>
+): (classComponent: C) => ConnectedComponent<V, OwnProps>
+```
+
+A HOC wrapper of `useSelector` to connect store state to the class components, and is only for class components.
+
+`connect` accepts two parameters:
+
 - `selectorWithProps(ownProps?)`: familiar to selector, but the difference is selectorWithProps must return object type(such as `mapStateToProps` in react-redux), selectorWithProps accepts the connected component's props as parameter.
@@ -191,5 +223,6 @@
 
-### <HoduxConfig equal={fn} debugger={fn} />
+### `<HoduxConfig equals={fn} debugger={fn} />`
 
-The global config Provider.
+- Type: `React.FunctionComponent<React.PropsWithChildren<Config<any>>>`
+- Description: The global config Provider.
 
@@ -211,7 +244,8 @@ ```js
 
-### batch(fn: Function)
+### `batch(fn)`
 
-A wrapper of `unstable_batchedUpdates`, to prevent multiples render caused by multiple synchronous store mutations. If you experience performance issues you can batch changes manually with `batch`.
+- Signature: `function batch(fn: Function) => void`
+- Description: a wrapper of `unstable_batchedUpdates`, to prevent multiples render caused by multiple store mutations in asynchronous handler such as `setTimeout` and `Promise`, etc. If you experience performance issues you can batch changes manually with `batch`.
 
-> NOTE: The React team plans to improve render batching in the future. The batch API may be removed in the future in favor of React's own batching.
+> NOTE: The React team plans to improve render batching in the future. The `batch` API may be removed in the future in favor of React's own batching.
 
@@ -218,0 +252,0 @@ ```js

src/types.ts

@@ -157,3 +157,3 @@ import { ComponentClass, PropsWithChildren, NamedExoticComponent } from 'react';
 >(
-  classComponent: C,
+  classComponent: C
 ) => ConnectedComponent<
@@ -160,0 +160,0 @@ C,

src/useSelector.ts

@@ -13,3 +13,3 @@ import React, { useContext, useEffect, useLayoutEffect, useReducer, useRef } from 'react';
 /**
- * A hook to access the state of a hodux store.
+ * Extracts state from store as needed, the components will **re-render only if the selected state changes**
  *
@@ -16,0 +16,0 @@ * useSelector accepts two parameters:

No alert changes

Improved metrics

Number of lines in readme file

275

increased by14.11%

Worsened metrics

Total package byte prevSize

58670

decreased by-16.19%

Number of package files

22

decreased by-46.34%

Lines of code

1187

decreased by-32.98%

No dependency changes