Skip to content

Commit 7d20b36

Browse files
rwieruchrwieruch
committed
finish
1 parent 816b1b8 commit 7d20b36

File tree

4 files changed

+29
-75
lines changed

4 files changed

+29
-75
lines changed

‎.babelrc‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,5 @@
22
"presets": [
33
"@babel/preset-env",
44
"@babel/preset-react"
5-
],
6-
"plugins": [
7-
"@babel/plugin-proposal-object-rest-spread"
85
]
96
}

‎README.md‎

Lines changed: 24 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,103 +1,57 @@
1-
# useCombinedReducers React Hook
1+
# useStateWithCallback React Hook
22

3-
[![Build Status](https://travis-ci.org/the-road-to-learn-react/use-combined-reducers.svg?branch=master)](https://travis-ci.org/the-road-to-learn-react/use-combined-reducers) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/) [![Greenkeeper badge](https://badges.greenkeeper.io/the-road-to-learn-react/use-combined-reducers.svg)](https://greenkeeper.io/) [![Coverage Status](https://coveralls.io/repos/github/the-road-to-learn-react/use-combined-reducers/badge.svg?branch=master)](https://coveralls.io/github/the-road-to-learn-react/use-combined-reducers?branch=master) ![NPM](https://img.shields.io/npm/l/use-combined-reducers.svg)
3+
[![Build Status](https://travis-ci.org/the-road-to-learn-react/use-state-with-callback.svg?branch=master)](https://travis-ci.org/the-road-to-learn-react/use-state-with-callback) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/) [![Greenkeeper badge](https://badges.greenkeeper.io/the-road-to-learn-react/use-state-with-callback.svg)](https://greenkeeper.io/) [![Coverage Status](https://coveralls.io/repos/github/the-road-to-learn-react/use-state-with-callback/badge.svg?branch=master)](https://coveralls.io/github/the-road-to-learn-react/use-state-with-callback?branch=master) ![NPM](https://img.shields.io/npm/l/use-state-with-callback.svg)
44

5-
Custom hook to combine all useReducer hooks for one global state container with one dispatch function. Use at top-level and pass dispatch function (and state) down via React's Context API with Provider and Consumer/useContext.
6-
7-
* [Example Application](https://github.com/the-road-to-learn-react/react-with-redux-philosophy)
8-
* ["How to implement it"-tutorial](https://www.robinwieruch.de/redux-with-react-hooks/).
9-
* Requirements: [reducer](https://www.robinwieruch.de/javascript-reducer/) and [useReducer](https://www.robinwieruch.de/react-usereducer-hook/) explained.
5+
Custom hook to include a callback function for useState which was previously available for setState in class components.
106

117
## Installation
128

13-
`npm install use-combined-reducers`
9+
`npm install use-state-with-callback`
1410

1511
## Usage
1612

17-
Create a global dispatch function and state object by initializing multiple `useReducer` hooks in `useCombinedReducers`:
18-
1913
```
2014
import React from 'react';
21-
import useCombinedReducers from 'use-combined-reducers';
22-
23-
const App = () => {
24-
const [state, dispatch] = useCombinedReducers({
25-
myTodos: React.useReducer(todoReducer, initialTodos),
26-
myOtherStuff: React.useReducer(stuffReducer, initialStuff),
27-
});
28-
29-
const { myTodos, myOtherStuff } = state;
3015
31-
...
32-
}
33-
34-
export default App;
35-
```
16+
import useStateWithCallback from 'use-state-with-callback';
3617
37-
You can pass state and dispatch function down via [props](https://www.robinwieruch.de/react-pass-props-to-component/) or [React's Context API](https://www.robinwieruch.de/react-context-api/). Since passing it down with props is straight forward, the approach with context is demonstrated here. In some file:
38-
39-
```
40-
import React from 'react';
41-
42-
export const StateContext = React.createContext();
43-
export const DispatchContext = React.createContext();
44-
```
45-
46-
In your top-level React component (or any other component above a component tree which needs managed state):
47-
48-
```
49-
import React from 'react';
50-
import useCombinedReducers from 'use-combined-reducers';
51-
52-
import { StateContext, DispatchContext } from './somefile.js';
18+
// import { useStateWithCallbackInstant } from 'use-state-with-callback';
5319
5420
const App = () => {
55-
const [state, dispatch] = useCombinedReducers({
56-
myTodos: React.useReducer(todoReducer, initialTodos),
57-
myOtherStuff: React.useReducer(stuffReducer, initialStuff),
21+
const [count, setCount] = useStateWithCallback(0, count => {
22+
if (count > 1) {
23+
console.log('render, then callback.');
24+
console.log('otherwise use useStateWithCallbackInstant()');
25+
}
5826
});
5927
60-
return (
61-
<DispatchContext.Provider value={dispatch}>
62-
<StateContext.Provider value={state}>
63-
<SomeComponent />
64-
</StateContext.Provider>
65-
</DispatchContext.Provider>
66-
);
67-
}
68-
69-
export default App;
70-
```
71-
72-
In some other component which sits below the state/dispatch providing component:
73-
74-
```
75-
import React from 'react';
76-
77-
import { StateContext, DispatchContext } from './somefile.js';
78-
79-
export default () => {
80-
const state = React.useContext(StateContext);
81-
const dispatch = React.useContext(DispatchContext);
82-
83-
const { myTodos, myOtherStuff } = state;
28+
// const [count, setCount] = useStateWithCallbackInstant(0, count => {
29+
// if (count > 1) {
30+
// console.log('render with instant callback.');
31+
// }
32+
// });
8433
8534
return (
8635
<div>
87-
...
36+
{count}
37+
38+
<button type="button" onClick={() => setCount(count + 1)}>
39+
Increase
40+
</button>
8841
</div>
8942
);
9043
};
9144
```
9245

9346
## Contribute
9447

95-
* `git clone git@github.com:the-road-to-learn-react/use-combined-reducers.git`
96-
* `cd use-combined-reducers`
48+
* `git clone git@github.com:the-road-to-learn-react/use-state-with-callback.git`
49+
* `cd use-state-with-callback`
9750
* `npm install`
9851
* `npm run test`
9952

10053
### More
10154

10255
* [Publishing a Node Package to NPM](https://www.robinwieruch.de/publish-npm-package-node/)
10356
* [Node.js Testing Setup](https://www.robinwieruch.de/node-js-testing-mocha-chai/)
57+
* [React Testing Setup](https://www.robinwieruch.de/react-testing-tutorial/)

‎package.json‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "use-state-with-callback",
3-
"version": "1.0.14",
3+
"version": "1.0.16",
44
"description": "",
55
"main": "lib/index.js",
66
"scripts": {
@@ -20,7 +20,6 @@
2020
"@babel/cli": "^7.4.4",
2121
"@babel/core": "^7.2.2",
2222
"@babel/node": "^7.2.2",
23-
"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
2423
"@babel/preset-env": "^7.2.3",
2524
"@babel/preset-react": "^7.0.0",
2625
"@babel/register": "^7.4.4",

‎webpack.config.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,10 @@ module.exports = {
66
library: 'node-package-open-source-starter',
77
libraryTarget: 'umd',
88
},
9+
externals: {
10+
react: 'react',
11+
'react-dom': 'react-dom',
12+
},
913
module: {
1014
rules: [
1115
{

0 commit comments

Comments
 (0)