		@@ -1,88 +0,41 @@
		# useCombinedReducers React Hook
		# useStateWithCallback React Hook

		[![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)
		[![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)

		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.
		Custom hook to include a callback function for useState which was previously available for setState in class components.

		* [Example Application](https://github.com/the-road-to-learn-react/react-with-redux-philosophy)
		* ["How to implement it"-tutorial](https://www.robinwieruch.de/redux-with-react-hooks/).
		* Requirements: [reducer](https://www.robinwieruch.de/javascript-reducer/) and [useReducer](https://www.robinwieruch.de/react-usereducer-hook/) explained.

		## Installation

		`npm install use-combined-reducers`
		`npm install use-state-with-callback`

		## Usage

		Create a global dispatch function and state object by initializing multiple `useReducer` hooks in `useCombinedReducers`:

		```
		import React from 'react';
		import useCombinedReducers from 'use-combined-reducers';

		const App = () => {
		const [state, dispatch] = useCombinedReducers({
		myTodos: React.useReducer(todoReducer, initialTodos),
		myOtherStuff: React.useReducer(stuffReducer, initialStuff),
		});
		import useStateWithCallback from 'use-state-with-callback';

		const { myTodos, myOtherStuff } = state;
		// import { useStateWithCallbackInstant } from 'use-state-with-callback';

		...
		}

		export default App;
		```

		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:

		```
		import React from 'react';

		export const StateContext = React.createContext();
		export const DispatchContext = React.createContext();
		```

		In your top-level React component (or any other component above a component tree which needs managed state):

		```
		import React from 'react';
		import useCombinedReducers from 'use-combined-reducers';

		import { StateContext, DispatchContext } from './somefile.js';

		const App = () => {
		const [state, dispatch] = useCombinedReducers({
		myTodos: React.useReducer(todoReducer, initialTodos),
		myOtherStuff: React.useReducer(stuffReducer, initialStuff),
		const [count, setCount] = useStateWithCallback(0, count => {
		if (count > 1) {
		console.log('render, then callback.');
		console.log('otherwise use useStateWithCallbackInstant()');
		}
		});

		return (
		<DispatchContext.Provider value={dispatch}>
		<StateContext.Provider value={state}>
		<SomeComponent />
		</StateContext.Provider>
		</DispatchContext.Provider>
		);
		}
		// const [count, setCount] = useStateWithCallbackInstant(0, count => {
		// if (count > 1) {
		// console.log('render with instant callback.');
		// }
		// });

		export default App;
		```

		In some other component which sits below the state/dispatch providing component:

		```
		import React from 'react';

		import { StateContext, DispatchContext } from './somefile.js';

		export default () => {
		const state = React.useContext(StateContext);
		const dispatch = React.useContext(DispatchContext);

		const { myTodos, myOtherStuff } = state;

		return (
		<div>
		...
		{count}

		<button type="button" onClick={() => setCount(count + 1)}>
		Increase
		</button>
		</div>
		@@ -95,4 +48,4 @@ );

		* `git clone git@github.com:the-road-to-learn-react/use-combined-reducers.git`
		* `cd use-combined-reducers`
		* `git clone git@github.com:the-road-to-learn-react/use-state-with-callback.git`
		* `cd use-state-with-callback`
		* `npm install`
		@@ -105,1 +58,2 @@ * `npm run test`
		* [Node.js Testing Setup](https://www.robinwieruch.de/node-js-testing-mocha-chai/)
		* [React Testing Setup](https://www.robinwieruch.de/react-testing-tutorial/)

use-state-with-callback - npm Package Compare versions

Worsened metrics