rest-redux
Provides actions & reducers to communicate with REST API Backend.
Loopback API out of the box, as its intended to use on that internally
NOTE: WIP, Under active development. And will supportSummary
rest-redux makes communication with REST API very easy. It reduces lot of boilerplate code. It manages normalized redux state for apis & provides easy to use actions/selectors.
Installation
Add rest-redux to your package.json dependencies.
npm install rest-redux --save
Code
Setup rest-redux
const restRedux = basePath: 'http://localhost:3000/api' globalOptions: //global options, you can set headers & params headers: 'Accept': 'application/json' 'Content-Type': 'application/json' models: modelName: 'todos' lists: //List allow to fetch paging data name:'my' options:pageSize: 5 name:'public' schema: //Uses normalizr.js (https://github.com/paularmstrong/normalizr) definition: {} options: {} modelName: 'users' let reducer = //IMPORTANT: thunk middleware is required for rest-redux to function. //And it should come before restRedux in middleware chainconst middlewares = ; let store = // create actions/selectors for each model using following APIconst todo = restReduxconst user = restRedux const todoActions = todoactionsconst todoSelectors = todoselectors
Using Actions
Available methods: create, update, updateAll, deleteById, find, findById,
const todoActions = restReduxactions //create Todo //update Todo //delete todo
Using Selectors
Available methods: getInstances, isLoading, getCount, getFound
const todoSelectors = restReduxselectors//get All available instancestodoSelectors //get All last find result instancestodoSelectors //get Count API resulttodoSelectors //get loading state, true when any API is executing on the ModeltodoSelectors
Using Lists (At Concept stage )
List feature provides easy way to manage multiple find/filter REST requests with paging for any model.
Actions & Selectors
const todos = restRedux//each list instance has actions & selectorsconst myTodosList = todoslistsmy //Get all instances found in this listmyTodosListselectors //Returns the current pagemyTodosListselectors //Returns list of page numbersmyTodosListselectors //Returns total number of pages availablemyTodosListselectors //Returns whether previous page is avaliable or notmyTodosListselectors //Returns whether next page is avaliable or notmyTodosListselectors
List HOC (Higher Order Component)
MyTodoViewconst MyTodoView => instances pages total hasNext hasPrev return <div> ... </div>
Running Example
It works directly with src folder (using Webpack alias). you need to do npm install in /, /example & /example/server before starting
Start Backend Server (with in memory DB & dummy Data)
cd example/servernpm start
Start Front end App Development Server
cd examplenpm start