Using Repertoire
Repertoire works together with React and Redux, so make sure you have the following packages installed in your application:
Creating Controllers
The main purpose of a controller is to encapsulate actions which will eventually update the Redux store. The constructor is where we define the store properties that are to be mapped to the React component.
A controller will receive one React component as argument.
Adding Actions
The essence of the controller are the actions. These actions, along with the state properties, are mapped automatically to the React component. You can also map them yourself to another component which is not linked to the controller, by using the connect() utility from react-redux package. More on that later.
Defining a new action is as simple as adding a new method to the controller. Every action has an implicit reducer which will updated the Redux store.
The action needs to return a Promise. The result of the promise will be merged with the existing state of the Redux store.
Repertoire uses redux-saga internally as the Redux middleware, but you'll most likely not have to care about it.
Mapping Store State to React
In order to map the Redux store state to React props, you will need to define the controllerstate
. This will automatically be made available to the React component as properties, along with the controller actions.
In the previous step there is an action which eventually will resolve with the object {users: result}
and this will update the store.
The following will result in a React prop containing the users
store value.
Controller Namespace
If you would like to use a specific namespace on the Redux store, most likely because you want two or more controllers to operate on the same store segment, you can use the stateNamespace
property.
Connecting Store Updates Manually
Sooner or later you will probably need to manually connect the Redux store state or dispatch actions to a component which is not directly linked to a controller, by using the connect() utility.
To do so, you can reference existing actions using dispatchActions
and bind them using the bindActionCreators
utility from Redux.