You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Lightweight ([<600B minified + gzipped](https://bundlephobia.com/result?p=use-store@0.0.1)) alternative for [react-redux][] using React Hooks.
3
+
Lightweight ([<600B minified + gzipped](https://bundlephobia.com/result?p=use-substate)) React Hook to subscribe to a subset of your state.
4
4
5
5
6
6
```js
7
7
functionComponent() {
8
-
const [mappedState, dispatch] =useStore(state=> {
8
+
const [substate, dispatch] =useSubstate(state=> {
9
9
return { count:state.count };
10
10
});
11
11
12
12
return (
13
13
<div>
14
-
{mappedState.count}
14
+
{substate.count}
15
15
16
16
<button
17
17
onClick={() =>dispatch({ type:"INCREMENT" })}
@@ -23,45 +23,42 @@ function Component() {
23
23
}
24
24
```
25
25
26
-
In opposite to [react-redux][], this library only requires a `mapState` function. It is meant to call the `dispatch` function with the action directly. Advanced concepts like `connectAdvanced` or `mapDispatchToProps` are deliberately not supported.
27
-
28
26
### Features
29
27
30
28
- ⏬ Lightweight
31
29
- ✅ Concurrent React ready (avoids rendering stale state)
32
-
- ⚛️ Works with your existing Redux-like store
33
-
- 🎮 You’re in full control of your store and can use it outside React as well
34
30
- 🐋 Only updates components that need to be updated
35
-
- 🔂 Uses an external event subscription to short-circuit context propagation (We’ll see if that works out)
31
+
- 🔂 Uses an external event subscription to short-circuit context propagation
36
32
- 🎈 Full Flow and TypeScript support coming soon
33
+
- ⚛️ Works with your existing Redux-like store
34
+
- 🎮 You’re in full control of your store and can use it outside React as well
37
35
38
36
## Requirements
39
37
40
-
__⚠️ To use `useStore`, you will need the unstable and experimental React 16.7.0-alpha.__
38
+
__⚠️ To use `useSubstate`, you will need the unstable and experimental React 16.7.0-alpha.__
41
39
42
-
`useStore` can also be used together with [react-redux][] in your existing [Redux][] application.
40
+
`useSubstate` can also be used together with [react-redux][] in your existing [Redux][] application. Check out [Comparison To Redux][#comparison-to-redux] for more infomration.
43
41
44
42
## Installation
45
43
46
44
```bash
47
-
npm install --save use-store
45
+
npm install --save use-substate
48
46
```
49
47
50
48
## Usage
51
49
52
-
You can use `useStore` with your existing [Redux][] store or with a simple alternative (as outlined in [createStore.js](./example/createStore.js)). This package will export
53
-
a [React Context](https://reactjs.org/docs/context.html) consumer (`StoreContext`) as well the `useStore` hook.
50
+
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.
54
51
55
-
This custom hook will expose an API similar to [`useReducer`](https://reactjs.org/docs/hooks-reference.html#usereducer). The only argument for `useStore` is a `mapState` function which is used to select parts of your store to be used within the component that uses the hook. This allows `useStore` to bail out if unnecessary parts change. Every component that uses this custom hook will automatically subscribe to the store.
52
+
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.
56
53
57
-
The example below will show all steps necessary to use `useStore`:
54
+
The example below will show all steps necessary to use `useSubstate`:
[Redux][] itself is a library used to create stores that can be updated via reducers. In fact, `useSubstate` works flawlessly with your current Redux store.
102
+
103
+
In opposite to [react-redux][], this library only requires a `mapState` function. It is meant to call the `dispatch` function with the action directly. Advanced concepts like `connectAdvanced` or `mapDispatchToProps` are deliberately not supported.
104
+
105
+
To use `useSubstate` with your current [`react-redux`][] React application, find the react-redux `Provider` and make sure to wrap it with a `SubstateProvider`:
106
+
107
+
```diff
108
+
import React from "react";
109
+
import { render } from "react-dom";
110
+
import { Provider } from "react-redux";
111
+
+ import { SubstateProvider } from "use-substate";
112
+
import { createStore } from "redux";
113
+
import todoApp from "./reducers";
114
+
import App from "./components/App";
115
+
116
+
const store = createStore(todoApp);
117
+
118
+
render(
119
+
+ <SubstateProvider value={store}>
120
+
<Provider store={store}>
121
+
<App />
122
+
</Provider>
123
+
+ </SubstateProvider>,
124
+
document.getElementById("root")
125
+
);
126
+
```
101
127
102
128
## Acknowledgements
103
129
104
-
Special thanks to [@gaearon](https://github.com/gaearon) and [@sophiebits](https://github.com/sophiebits) for helping me spot an issue in my initial implementation and showing me how to fix it.
130
+
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.
105
131
106
132
## Contributing
107
133
108
134
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:
109
135
110
-
1. Create a fork of this [repository](https://github.com/philipp-spiess/use-store), so you can work on your own environment.
136
+
1. Create a fork of this [repository](https://github.com/philipp-spiess/use-substate), so you can work on your own environment.
4. Commit your changes ([here](https://chris.beams.io/posts/git-commit/) is a wonderful guide on how to make amazing git commits).
121
-
5. After a few seconds, a button to create a pull request should be visible inside the [Pull requests](https://github.com/philipp-spiess/use-store/pulls) section.
147
+
5. After a few seconds, a button to create a pull request should be visible inside the [Pull requests](https://github.com/philipp-spiess/use-substate/pulls) section.
122
148
123
149
## Future Improvements
124
150
125
-
- [ ] Find a better, more outstanding, name that also reflects what this thing is doing. (Current ideas: `useSelector`, `useReduxer`, `useGloducer`, `useStateAtom`, `useGlobalReducer`, `useShore`, `useFlux`, `useSharedState`, `useGlobalState`, `useOffShore`, `useTrunk`, `useStoreHouse`, `useDepot`)
126
151
- [ ] Add Flow and TypeScript types. This is actually very important for this library: Actions must be typed as an enum such that the type system can find out if we use the wrong type.
0 commit comments