From e29f26bd630baa58ae6b4f599e7b8dea24f6b9fc Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Sun, 28 Oct 2018 02:38:42 +0100 Subject: [PATCH 01/13] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3ba010c..9531ede 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# โš“๏ธ useSubstate +# ๐Ÿฃ useSubstate Lightweight ([<600B minified + gzipped](https://bundlephobia.com/result?p=use-substate)) React Hook to **sub**scribe to a **sub**set of your state. From 8ffda6879f2c8d256cb7ae34767700ebc2836d48 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Sun, 28 Oct 2018 02:39:14 +0100 Subject: [PATCH 02/13] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 9531ede..3ea1319 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -# ๐Ÿฃ useSubstate +# ๐Ÿ™ useSubstate Lightweight ([<600B minified + gzipped](https://bundlephobia.com/result?p=use-substate)) React Hook to **sub**scribe to a **sub**set of your state. From f7a1a13a866cc613889b3eb86443ecaffad6f4da Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Sun, 28 Oct 2018 10:45:00 +0100 Subject: [PATCH 03/13] Only useful with the single-state atom model --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3ea1319..12de164 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # ๐Ÿ™ useSubstate -Lightweight ([<600B minified + gzipped](https://bundlephobia.com/result?p=use-substate)) React Hook to **sub**scribe to a **sub**set of your state. +Lightweight ([<600B minified + gzipped](https://bundlephobia.com/result?p=use-substate)) React Hook to **sub**scribe to a **sub**set of your single app state. ```js From ad54fd2ea8bc43de14d9d608f74074f16d805be5 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Sun, 28 Oct 2018 18:15:05 +0100 Subject: [PATCH 04/13] Update README.md --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 12de164..2e64699 100644 --- a/README.md +++ b/README.md @@ -37,12 +37,12 @@ npm install --save use-substate ## Features -- โฌ Lightweight +- โฌ Lightweight ([<600B minified + gzipped](https://bundlephobia.com/result?p=use-substate)) +- โš›๏ธ Works with your existing Redux-like store - โœ… Concurrent React ready (avoids rendering stale state) -- ๐Ÿ‹ Only updates components that need to be updated +- ๐Ÿ™…โ€โ™€๏ธ Avoids unnecessary re-renders - ๐Ÿ”‚ Uses an external event subscription to short-circuit context propagation - ๐ŸŽˆ Full Flow and TypeScript support coming soon -- โš›๏ธ Works with your existing Redux-like store - ๐ŸŽฎ Youโ€™re in full control of your store and can use it outside React as well ## Usage From e5411bb70de81dd654ed714844cd97328d39db30 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Sun, 28 Oct 2018 18:30:32 +0100 Subject: [PATCH 05/13] Update README.md --- README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index 2e64699..6533396 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,16 @@ function Component() { } ``` +## Features + +- โฌ Lightweight ([<600B minified + gzipped](https://bundlephobia.com/result?p=use-substate)) +- โš›๏ธ Works with your existing Redux-like store +- โœ… Concurrent React ready (avoids rendering stale state) +- ๐Ÿ™…โ€โ™€๏ธ Avoids unnecessary re-renders +- ๐Ÿ”‚ Uses an external event subscription to short-circuit context propagation +- ๐ŸŽˆ Full Flow and TypeScript support coming soon +- ๐ŸŽฎ Youโ€™re in full control of your store and can use it outside React as well + ## Requirements __โš ๏ธ To use `useSubstate`, you will need the unstable and experimental React 16.7.0-alpha.__ @@ -35,16 +45,6 @@ __โš ๏ธ To use `useSubstate`, you will need the unstable and experimental React npm install --save use-substate ``` -## Features - -- โฌ Lightweight ([<600B minified + gzipped](https://bundlephobia.com/result?p=use-substate)) -- โš›๏ธ Works with your existing Redux-like store -- โœ… Concurrent React ready (avoids rendering stale state) -- ๐Ÿ™…โ€โ™€๏ธ Avoids unnecessary re-renders -- ๐Ÿ”‚ Uses an external event subscription to short-circuit context propagation -- ๐ŸŽˆ Full Flow and TypeScript support coming soon -- ๐ŸŽฎ Youโ€™re in full control of your store and can use it outside React as well - ## Usage You can use `useSubstate` with your existing [Redux][] store or with a simple alternative (like [create-state](https://github.com/philipp-spiess/create-state)). This package will export a [React Context](https://reactjs.org/docs/context.html) consumer (`SubstateContext`) as well the `useSubstate` hook. From 940fa88829af5a30c117ad0e0b7b1a683d5e64ca Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 29 Oct 2018 01:31:51 +0100 Subject: [PATCH 06/13] Rename create-state to create-store --- README.md | 4 ++-- example/example.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 6533396..4121c28 100644 --- a/README.md +++ b/README.md @@ -47,7 +47,7 @@ npm install --save use-substate ## Usage -You can use `useSubstate` with your existing [Redux][] store or with a simple alternative (like [create-state](https://github.com/philipp-spiess/create-state)). This package will export a [React Context](https://reactjs.org/docs/context.html) consumer (`SubstateContext`) as well the `useSubstate` hook. +You can use `useSubstate` with your existing [Redux][] store or with a simple alternative (like [create-store](https://github.com/philipp-spiess/create-store)). This package will export a [React Context](https://reactjs.org/docs/context.html) consumer (`SubstateContext`) as well the `useSubstate` hook. This custom hook will expose an API similar to [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer). The only argument for `useSubstate` is a `selectSubstate` function which is used to select parts of your state to be used within the component that uses the hook. This allows `useSubstate` to bail out if unnecessary parts change. Every component that uses this custom hook will automatically subscribe to the store. @@ -57,7 +57,7 @@ The example below will show all steps necessary to use `useSubstate`: import React, { useState } from "react"; import ReactDOM from "react-dom"; -import createStore from "create-state"; +import createStore from "create-store"; import { SubstateProvider, useSubstate } from "../"; const initialState = { count: 0 }; diff --git a/example/example.js b/example/example.js index d326c9c..12fc131 100644 --- a/example/example.js +++ b/example/example.js @@ -1,7 +1,7 @@ import React, { useState } from "react"; import ReactDOM from "react-dom"; -import createStore from "create-state"; +import createStore from "create-store"; import { SubstateProvider, useSubstate } from "../"; const initialState = { count: 0 }; From b702765f1bdab39a4eb056da22667a1a0db3143e Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 29 Oct 2018 20:18:12 +0100 Subject: [PATCH 07/13] Mention more libraries that had an influence --- README.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/README.md b/README.md index 4121c28..0a7763c 100644 --- a/README.md +++ b/README.md @@ -129,6 +129,8 @@ render( Special thanks to [@sophiebits](https://github.com/sophiebits) and [@gaearon](https://github.com/gaearon) for helping me spot an issue in my initial implementation and showing me how to fix it. +This library is also heavily influenced by the design of [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer), [react-redux](https://github.com/reduxjs/react-redux), [Reducer components](https://reasonml.github.io/reason-react/docs/en/state-actions-reducer.html) in ReasonReact, [Elm](http://elm-lang.org/), [Reagent (Clojure)](https://reagent-project.github.io/), [Om (Clojure)](https://github.com/omcljs/om), and a lot of other libraries that I have seen over the years. Thank you all for pushing the Web forward โค๏ธ. + ## Contributing Every help on this project is greatly appreciated. To get you started, here's a quick guide on how to make good and clean pull-requests: From a078b7391ec3d2dd37dd38db7e5f2147b5898522 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 29 Oct 2018 20:24:17 +0100 Subject: [PATCH 08/13] Mention create-subscription --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0a7763c..aa356f4 100644 --- a/README.md +++ b/README.md @@ -129,7 +129,7 @@ render( Special thanks to [@sophiebits](https://github.com/sophiebits) and [@gaearon](https://github.com/gaearon) for helping me spot an issue in my initial implementation and showing me how to fix it. -This library is also heavily influenced by the design of [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer), [react-redux](https://github.com/reduxjs/react-redux), [Reducer components](https://reasonml.github.io/reason-react/docs/en/state-actions-reducer.html) in ReasonReact, [Elm](http://elm-lang.org/), [Reagent (Clojure)](https://reagent-project.github.io/), [Om (Clojure)](https://github.com/omcljs/om), and a lot of other libraries that I have seen over the years. Thank you all for pushing the Web forward โค๏ธ. +This library is also heavily influenced by the design of [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer), [create-subscription](https://github.com/facebook/react/tree/master/packages/create-subscription), [react-redux](https://github.com/reduxjs/react-redux), [Reducer components](https://reasonml.github.io/reason-react/docs/en/state-actions-reducer.html) in ReasonReact, [Elm](http://elm-lang.org/), [Reagent (Clojure)](https://reagent-project.github.io/), [Om (Clojure)](https://github.com/omcljs/om), and a lot of other libraries that I have seen over the years. Thank you all for pushing the Web forward โค๏ธ. ## Contributing From 4f23b6e8fc46f574dcfc19e8c32af3b92f1e35df Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 29 Oct 2018 20:31:26 +0100 Subject: [PATCH 09/13] Not concurrent React ready. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit I shouldโ€™ve thought about when updates are scheduled as well ๐Ÿ™ƒ Letโ€™s remove fake news (thanks @acdlite). --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index aa356f4..61998be 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,6 @@ function Component() { - โฌ Lightweight ([<600B minified + gzipped](https://bundlephobia.com/result?p=use-substate)) - โš›๏ธ Works with your existing Redux-like store -- โœ… Concurrent React ready (avoids rendering stale state) - ๐Ÿ™…โ€โ™€๏ธ Avoids unnecessary re-renders - ๐Ÿ”‚ Uses an external event subscription to short-circuit context propagation - ๐ŸŽˆ Full Flow and TypeScript support coming soon From e172733f7eb152c7adb4f80d042a0823ac08d48f Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Mon, 29 Oct 2018 20:44:18 +0100 Subject: [PATCH 10/13] Concurrent React Unsafe --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 61998be..25fe58b 100644 --- a/README.md +++ b/README.md @@ -28,7 +28,7 @@ function Component() { - โฌ Lightweight ([<600B minified + gzipped](https://bundlephobia.com/result?p=use-substate)) - โš›๏ธ Works with your existing Redux-like store - ๐Ÿ™…โ€โ™€๏ธ Avoids unnecessary re-renders -- ๐Ÿ”‚ Uses an external event subscription to short-circuit context propagation +- ๐Ÿ”‚ Uses an external event subscription to short-circuit context propagation (Making it Concurrent React _Unsafe_) - ๐ŸŽˆ Full Flow and TypeScript support coming soon - ๐ŸŽฎ Youโ€™re in full control of your store and can use it outside React as well From f3646a813bd5f029f6ffc7bf210113db724b48a8 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Tue, 30 Oct 2018 18:26:30 +0100 Subject: [PATCH 11/13] =?UTF-8?q?Mention=20Dan=E2=80=99s=20blog=20post?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 25fe58b..fa2f151 100644 --- a/README.md +++ b/README.md @@ -34,7 +34,7 @@ function Component() { ## Requirements -__โš ๏ธ To use `useSubstate`, you will need the unstable and experimental React 16.7.0-alpha.__ +__โš ๏ธ To use `useSubstate`, you will need the unstable and experimental React 16.7.0-alpha. Check out the [official documentation](https://reactjs.org/docs/hooks-intro.html) or [this blog post](https://medium.com/@dan_abramov/making-sense-of-react-hooks-fdbde8803889) by Dan Abramov for more information.__ `useSubstate` can also be used together with [react-redux][] in your existing [Redux][] application. Check out [Comparison To Redux](#comparison-to-redux) for more information. From 277dffbec4a871667daf645f0f4d4683bc82a878 Mon Sep 17 00:00:00 2001 From: Rauno Freiberg Date: Wed, 31 Oct 2018 00:23:36 +0200 Subject: [PATCH 12/13] Nit fix example (#1) Let's just make the example copyable out of the box :) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index fa2f151..36c1538 100644 --- a/README.md +++ b/README.md @@ -57,7 +57,7 @@ import React, { useState } from "react"; import ReactDOM from "react-dom"; import createStore from "create-store"; -import { SubstateProvider, useSubstate } from "../"; +import { SubstateProvider, useSubstate } from "use-substate"; const initialState = { count: 0 }; function reducer(state, action) { From 845db7cd2c423a7f4eb58261a44f1496e623f477 Mon Sep 17 00:00:00 2001 From: Philipp Spiess Date: Sat, 17 Nov 2018 15:13:35 +0100 Subject: [PATCH 13/13] Mention other libraries --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index 36c1538..a94e3b8 100644 --- a/README.md +++ b/README.md @@ -124,6 +124,13 @@ render( ); ``` +## Other Libraries + +Besides the [open issue in `react-redux`](https://github.com/reduxjs/react-redux/issues/1063), there are two other noticeable libraries that solve the a similiar problem: + +- [`redux-react-hook`](https://github.com/facebookincubator/redux-react-hook) +- [`react-use-redux`](https://github.com/martynaskadisa/react-use-redux) + ## Acknowledgements Special thanks to [@sophiebits](https://github.com/sophiebits) and [@gaearon](https://github.com/gaearon) for helping me spot an issue in my initial implementation and showing me how to fix it.