A small utility library which aims to simplify building React + Redux apps.
It works by simply adding the well-known Controller concept to a web application built with React as the view layer and removing the need of all the boiler plate code for actions, reducers, middlewares etc.
Installation
Repertoire works together with React and Redux, so the following packages are needed as pre-requisites (peer dependencies) in your application:
Building an app with React & Redux has become much simpler. We're not going to draw any elaborate diagrams which paint a too optimistic picture and instead we're just going to start coding an example application.
Our example is a basic user administration module, starting with the main component. We're also using the React Router to handle our application's routing needs.
The Controller is the main thing that Repertoire adds to your application's architecture. It does that by combining the individual redux pieces, such as reducers, actions and middlewares, together in one logical entity.
Each public method on the controller that will be exposed on the instance will be a redux action, and each of them will have an implicit reducer associated by default.
Every action needs to return a Promise and the result of the promise will be added to the store. If an action returns a value synchronously, that value will be converted to a Promise automatically.
The controller is also the place where the Redux state properties are defined, which are passed to React as props. Use the this.statesetter and getter to define the props to be passed to React or to inspect the current value of the Redux store.
controller.js
import {BaseController} from'repertoire'import AdminApi from'./api.js'exportdefaultclassAdminControllerextendsBaseController {// the section of the redux store which this controller will operate ongetstateNamespace() {return'admin'; }/** * * Methods that start with "__" are not processed as actions * * @param currentUser * @private */__handleFetchUsers(currentUser) {}setSelectedUser (selectedUser) {return { selectedUser }; }fetchAllUsers () {returnAdminApi.getUsers().then(result => ({users: result})); }addNewUser (params) {let addUserSuccess =false;let lastThrownError =null;returnAdminApi.addNewUser(params).then(_ => { addUserSuccess =true;returnAdminApi.getUsers(); }).catch(error => { lastThrownError = error;// return the existing list of users if an error occurredreturnthis.state.users; }).then(users => ({ addUserSuccess, lastThrownError, users })); }constructor(component) {super(component);this.state = {/** * Each function defined on this setter will received the namespaced * redux store value */users(store) {returnstore.users || []; },selectedUser(store) {returnstore.selectedUser ||''; },addUserSuccess(store) {returnstore.addUserSuccess ||false; } };// Final step. This is calling the connect() utility from react-reduxthis.connect(); }}
The api.js file contains a bunch of methods which will fire HTTP requests to the backend and return a Promise. Anything that returns a Promise will work.
3. The Admin React Component
In the main React component file we will have to instantiate the controller, passing the component itself, and export that instance. Other than that it's standard react / redux stuff.
That's pretty much it - a very basic Repertoire example, not necessarily functional though. You'll need an html template and a web server of course, along with a webpack (or other package manager) build system, but we're not going to focus on that part here.
Motivation
Yes, I know, another JS library. Where does it end, right?
In fact, Repertoire was created in an attempt to combat the ever increasing boiler plate code that you need to write in order to get something done. And it does that by removing most of the complexity and providing an interface which is based on well known concepts.
You don't need to learn Repertoire. Chances are, you already know it.
No need to start wrapping your head around reducers or middlewares, unless you want to or you really have to.