# React Flux Hook

This repo is derived from the following [Medium Article](https://medium.com/simply/state-management-with-react-hooks-and-context-api-at-10-lines-of-code-baf6be8302c).

## Enhance Your App with Global State

```js
import { StateProvider } from 'react-flux-hook'

const App = () => {
	const initialState = {
		theme: { primary: 'green' },
	}

	const reducer = (state, action) => {
		switch (action.type) {
			case 'changeTheme':
				return {
					...state,
					theme: action.newTheme,
				}

			default:
				return state
		}
	}

	return (
		<StateProvider initialState={initialState} reducer={reducer}>
			// App content ...
		</StateProvider>
	)
}
```

## Then Use and Update the State Inside Your App

````js
import { useStateValue } from 'react-flux-hook';

const ThemedButton = () => {
  const [{ theme }, dispatch] = useStateValue();
  return (
    <Button
      primaryColor={theme.primary}
      onClick={() => dispatch({
        type: 'changeTheme',
        newTheme: { primary: 'blue'}
      })}
    >
      Make me blue!
    </Button>
  );
}```
````