\n
![\"flow-chart\"](\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/01\/flow-chart1.png\")
\nThe observer pattern is used by React in rendering UI and plays an important role in Redux in terms of managing the application state.<\/p>\n
The observer pattern is one of the most common patterns in software design. In this pattern, a subject contains a list of observers who are apprised in the event of changes to the subject. Let us understand this with the help of the below diagram.
\n
\nThe observer pattern is used by React in rendering UI and plays an important role in Redux in terms of managing the application state.<\/p>\n
In React<\/a>: Whenever a state within a component is changed, the component is re-rendered. When the state of the parent component is passed to its child component as a prop, the child component will be re-rendered when the prop is changed. As this is a recursive process, it is shown in the below diagram: If the state of the parent component is passed to the grandchild component, then the change will cause all dependent components holding that state to be re-rendered. In redux:<\/strong> In redux, states are stored in a place called a store. Below is an example of this. Example of the observer pattern:<\/strong> Let\u2019s create an input element and an empty div.<\/p>\n This is all about the observer pattern in react js. <\/em><\/p>\n People having good knowledge of Financial accounting can get an Accounting Certification Exams<\/a> from StudySection to increase their chances of getting a job in this field. You can get a foundation level certification if you are new to Financial accounting or you can go for advanced level certification if you have expert level skills in Financial accounting.<\/em><\/small><\/p>\n
\n![\"flow-chart1\"](\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/01\/flow-chart1-1.png\")
<\/p>\n
\nIn this diagram, observers are the components that are holding the states, and the parent is the subject that is notifying the observers.<\/p>\n
\n![\"flow-chart2\"](\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2022\/01\/flow-chart2.png\")
\nThe store contains the modules for the state. The states are stored in a particular module. For example, all metadata information is stored in the metadata module, and all user-related information is stored in the user info module, etc.
\nThe observer pattern has nothing to do with React or Redux. It is not specific to any language or framework. It is a general pattern used in various contexts. This pattern is an example of one-to-many relationships by reducing the coupling between the objects.<\/p>\nHTML code:-<\/h3>\n
<input type=\"input\" class=\"input\" \/>
\n<div class=\"d1\"><\/div><\/code><\/p>\nJs code:-<\/h3>\n
class Observable {
\nconstructor() {
\nthis.observer = [];
\n}
\nsubscribe(item) {
\nthis.observer.push(item);
\n}
\nunsubscribe(item) {
\nif(!this.observer) return 'empty';
\nelse {
\nthis.observer.filter(subscribe => subscribe !== item);
\n}
\n}
\nnotify(data) {
\nthis.observer.forEach(item => item(data));
\n}
\n}
\nvar d1 = document.querySelector('.d1');
\nvar input = document.querySelector('.input');
\nconst update1 = text => d1.textContent = text;
\nvar observarble = new Observable();
\nobservarble.subscribe(update1);
\ninput.addEventListener('keyup', event => observarble.notify(event.target.value));<\/code><\/p>\n