nicolobruno / context-hooks

Example using React Context and useReducer-hooks.

This project was bootstrapped with Create React App.

Description

One simple form for replace react-redux in your app using context and useReducer.

Context

In /src/context/index we have define the function useGlobalValue with which we access state and dispatch in each component. Is very simple how redux.

const [state, dispatch] = useGlobalValue();

UseReducer

The hook useReducer receives three params reducer, initialArg and init. You can read more here.

In my case I use useReducer this way:

<GlobalContext.Provider value={useReducer(globalReducer, globalState)} >
  <div className="App">
    <Header />
    <Home />
  </div>
</GlobalContext.Provider>

In globalReducer we have define all the actions and globalState we have define the default values state.

Demo & Examples

To build the examples locally, run:

npm install
npm start

Then open localhost:8000 in a browser.

ScreenShot