cerebral-react-immutable-store
Cerebral package with react and immutable store
Requirements
It is required that you use a Webpack or Browserify setup. Read more at The ultimate webpack setup for an example.
Debugger
You can download the Chrome debugger here.
More info on Cerebral and video introduction
Cerebral main repo is located here and a video demonstration can be found here.
Video introduction
Watch a video on how you can use this package.
Install
npm install cerebral-react-immutable-store
API
All examples are shown with ES6 syntax.
Instantiate a Cerebral controller
controller.js
;; // The initial state of the applicationconst state = isLoading: false user: null error: null; // Any default input you want each action to receiveconst defaultInput = utils: request: request ; // Instantiate the controllerstate defaultInput;
main.js
;;; React;
With immutable-store you can also map state using functions, read more about that here.
Creating signals
Creating actions are generic. It works the same way across all packages. Please read about actions at the Cerebral Repo - Actions. You can also watch a video on signals to get an overview of how it works.
Typically you would create your signals in the main.js file, but you can split them out as you see fit.
main.js
;;; ;;; controller; React;
Get state in components
Decorator
;; @Component { thispropssignals; } { return <div> thispropsisLoading ? 'Loading...' : 'hello ' + thispropsusername thispropserror ? thispropserror : null </div> ; }
Higher Order Component
;; Component { thispropssignals; } { return <div> thispropsisLoading ? 'Loading...' : 'hello ' + thispropsusername thispropserror ? thispropserror : null </div> ; } App = ;
Mixin
;; const App = React;
Recording
;; @Component { thispropsrecorder; } { thispropsrecorder; } { thispropsrecorder; } { return <div> <button onClick= this>Record</button> <button onClick= this>Stop</button> <button onClick= this>Play</button> </div> ; }
Listening to changes
You can manually listen to changes on the controller, in case you want to explore reactive-router for example.
main.js
...const onChange = { state // New state};controllereventEmitter;controllereventEmitter; // When debugger traverses statecontrollereventEmitter;controllereventEmitter;
Listening to errors
You can listen to errors in the controller. Now, Cerebral helps you a lot to avoid errors, but there are probably scenarios you did not consider. By using the error event you can indicate messages to the user and pass these detailed error messages to a backend service. This lets you quickly fix bugs in production.
main.js
...const onError = { controllersignals; myErrorService;};controllereventEmitter;