Observables + Redux + JSON API + Typescript Example App

A minimal example to show how to use observable-redux-json-api library using React and Express.js.

This example app includes both backend (Express) and frontend (React) to show you how you can use Redux, RxJS and JSON API together.

If you want to see an example of just using Redux and JSON API without RxJS, have a look at this example app which uses the normal redux-json-api.

This example app uses the following libraries

Frontend

• React
• Redux Observable (+ peer deps Redux and RxJS)
• observable-redux-json-api (+ peer dep Redux Thunk)
• Typescript

Backend

• Express.js
• JSON API Serializer

Setup

Step 1: Clone this repo

git clone git@github.com:kristerkari/observable-redux-json-api-typescript-example.git

Step 2: Move to project and install project dependencies

cd observable-redux-json-api-typescript-example

npm install

or if you use Yarn:

yarn install

Step 3: Start Express server

npm start

or

yarn start

Step 4: Start Webpack server

npm run browser

or

yarn browser

Step 5: Open React app in your web browser.

Open http://localhost:8080 in your web browser.

Visualize bundle size

It's important for any library to keep it's bundle size small. Currently the bundle size of the example app without minifying the code is around 59kb gzipped. There is some work still to be done to get that size to be smaller.

To visualize what the example app's bundle consists of:

npm run analyze-bundle

or

yarn analyze-bundle