/react-context-reducer

Basic implementation of a react app with useContext + useReducer for app state.

Primary LanguageJavaScript

Basic Redux

Create application using data from https://api.exchangeratesapi.io/latest

This repo is a refactor of Basic Redux implementing useContext() & useReducer() in place of Redux.

I've wrapped useContext() and useReducer() in a central module ./store.js which returns an array similar to other React hooks like [state, dispatch].

Within that module, I've also included a simple thunk which attaches the dispatch function from useReducer(), a custom function called apiRequest(), and the state object. I did this so I can make composite action-creators which need to dispatch other action creators themselves, perhaps using values stored in the state. This also gives me a common location to attach a function for making http requests. This is useful because I can wrap custom logic for interacting with a theoretical API server like authz token/header management, data parsing, etc.

This is a very basic type of middleware. If more sophisticated logic is required it could also be appended to the context here (for example, if you wanted to add things similar to Redux's applyMiddleware() function).

Install

  • npm install
  • npm run build
  • open /build/index.html in a browser

NOTE: Build output has been committed to the repository for demonstration purposes (to show what the expected output looks like). In real-life the contents of /build would be omitted through .gitignore.

Folder Structure

The following structure is overkill for this small of an application, but I've included it for demonstration's sake. This provides a good set of buckets to begin to grow the application from scratch up until it reaches the point where a larger, more sophisticated and complex, structure would be warranted.

/assets - static assets like html, images, fonts, etc.
  index.html - main application starting point
/src - react application code  
  /components - dumb/stateless components
  /containers - smart/state-aware components
  /constants - config/global values
  /helpers - utility/helper modules
  /middleware - in-between action=>reducer functions
  store.js - context store
  index.js - main React application
/build - target for automated build processes

Example Data

Sample output from https://api.exchangeratesapi.io/latest

{
  "rates": {
    "CAD": 1.4561,
    "HKD": 8.6372,
    "ISK": 137.7,
    "PHP": 55.809,
    "DKK": 7.4727,
    "HUF": 333.37,
    "CZK": 25.486,
    "AUD": 1.6065,
    "RON": 4.7638,
    "SEK": 10.7025,
    "IDR": 15463.05,
    "INR": 78.652,
    "BRL": 4.5583,
    "RUB": 70.4653,
    "HRK": 7.4345,
    "JPY": 120.72    
  },
  "base": "EUR",
  "date": "2019-11-08"
}

Soko

I built a utilitiy library called Soko that I've used to transpile JS and build assets. It uses Browserify with Babel to handle ES6 syntax. This could alternatively have been replaced with Webpack. I enjoy CLI scripts that I can integrate with package.json using npx as I think it makes configuration a bit cleaner and keeps everything in one place.