react-state-hook

React Flux Hook

This repo is derived from the following Medium Article.

Installation

npm

npm i -S react-state-hook

yarn

yarn add react-state-hook

Usage

Enhance Your App with Global State

import { StateProvider } from 'react-state-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

import { useStateValue } from 'react-state-hook'

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

For Class Componnets

import React, { Component } from 'react'
import { StateContext } from 'react-state-hook'

class ThemedButton extends Component {
  static contextType = StateContext
  render() {
    const [{ theme }, dispatch] = this.context;
    return (
      <Button
        primaryColor={theme.primary}
        onClick={() => dispatch({
          type: 'changeTheme',
          newTheme: { primary: 'blue'}
        })}
      >
        Make me blue!
      </Button>
    )
  }
}

Combining Reducers

import userReducer from './reducers/user'
import basketReducer from './reducers/basket'

const mainReducer = ({ user, basket }, action) => {
	// middleware goes here, i.e calling analytics service, etc.

	return {
  	user: userReducer(user, action),
  	basket: basketReducer(basket, action)
	}
}