Debug your Unstated containers with ease
$ npm install unstated-debug
// AppContainer.js
import {Container} from 'unstated';
class AppContainer extends Container {
// …
}
// Container.js
import {Container} from 'unstated';
import unstatedDebug from 'unstated-debug';
export default unstatedDebug()(Container);
// AppContainer.js
import Container from './Container';
class AppContainer extends Container {
// …
}
This will make all your containers debuggable.
You can also make only individual containers debuggable:
// AppContainer.js
import {Container} from 'unstated';
import unstatedDebug from 'unstated-debug';
const makeDebuggable = unstatedDebug();
class AppContainer extends makeDebuggable(Container) {
// …
}
When enabled, it exposes a global object UNSTATED
which you can use in DevTools to explore the containers and their state.
The object contains the following properties:
isEnabled
- Same as the below option, but you can change it after init.logStateChanges
- Same as the below option, but you can change it after init.containers
- Your containers.states
- The state objects of your containers.logState()
- Logs the current state of your containers.
Type: Object
Type: boolean
Default: true
Toggle debugging.
For example, if you use this in an Electron app, you could pass it is.development
to ensure debugging is disabled in production.
Type: boolean
Default: true
Logs a diff for each state change to the containers. This gives you a live insight into state changes in your app.
MIT © Sindre Sorhus