The state of the application is controlled by the framework and it uses react redux for this, the implementation to change the state of the component is done inside the events.js file. Within events.js we have the mapping of the actions that will be triggered by the component, and we have the mapping of the reducers using the variable HANDLERS, the actions are objects that define the type of action that the component is triggering and which parameters the action will pass.
The reducer is where the state of the component is changed, it returns is the state update describing which properties should be changed, the variable HANDLERS is responsible for the reducers mapping. Each reducer's key is the type of action triggered by the component, in the function signature two parameters are expected: the current state of the component and the payload, the payload are the parameters passed by the triggered component.
The method that triggers the action is called dispatch, the dispatch is injected by the framework into all components as props, it receives an action to be triggered which is the object with type and payload, from that point on it is the framework that will be in charge of calling the redux, and the redux will then pass action for the reducer to change the state of the component.
Each time the state of the component changes, React calls the render method again by changing the HTML only where it has properties that have been updated.
Constant with the names of all events used in the component.
static EVENTS = {
ON_CLICK: 'ON_CLICK',
};This variable is the mapping of the reducers, the function returns an update statement to redux to change the state of the component and inject the new properties and values into the component.
static HANDLERS = {
[Events.EVENTS.ON_CLICK]: (state, payload) => {
return {}
}
};Mapping of the action to be triggered within the component.
static ON_CLICK() {
return {
type: Events.EVENTS.ON_CLICK,
payload: {
}
}
}Example of state functioning by implementing a click counter on the component.
First step is to set a default property inside schema.js, called countClicked with default value '0'.
Figure 7. First Step - Defining countClicked configuration.
Step two is to change the component to receive the new property and render. Insert into this.props.countClicked to be rendered in HMTL.
Figure 8. Second Step - Defining countClicked configuration.
By default when the component is generated, it comes with an implemented event that is the onClick in the root of the component, the handleOnClick function is called in the onClick which is then triggered an action; the action was previously defined in the events.js file.
All properties defined in propTypes are properties within the component and can be accessed through this.props. Since countClicked was added as a new property it can be accessed within the render() method.
Step three is to change the state of the component inside the events.js file.
Figure 9. Step three - change the state of the component.
The reducer method that responds to the onClick action should return an update statement, specifying which properties to change and what the value is. The update definition should be a structure using the immutability-helper library. In the case above, we take the previous state of countClicked and set a new value, the state of the component will be changed and React will call the render method again using the properties defined in reducer.
The visual result in the builder after making the changes, when clicking on the text the variable countClicked is incremented and after the state change the component is rendered again with the new value.
