{"id":424,"date":"2022-04-10T18:56:49","date_gmt":"2022-04-10T08:56:49","guid":{"rendered":"https:\/\/www.kernelio.com\/blog\/?p=424"},"modified":"2022-04-10T18:56:49","modified_gmt":"2022-04-10T08:56:49","slug":"flux-observer-factory-pattern-and-redux","status":"publish","type":"post","link":"https:\/\/www.kernelio.com\/blog\/2022\/04\/10\/flux-observer-factory-pattern-and-redux\/","title":{"rendered":"Flux, Observer, Factory pattern and Redux"},"content":{"rendered":"

Redux is an implementation of Flux pattern which aims to solve the state management issue in large scale complex react app.<\/p>\n

 <\/p>\n

Flux pattern<\/strong> at its core is pipe line:<\/p>\n

    \n
  1. \n
      \n
    1. An action dispatches an event.<\/li>\n
    2. Event is send at data store and triggers an mutation of the data.<\/li>\n
    3. Then the data mutation triggers the view update<\/li>\n
    4. User’s behaviour on view triggers more actions<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n

      \"\"<\/p>\n

       <\/p>\n

      React state updates triggers re-render of the view.\u00a0 When using Redux with React, React needs to know when state has changed in Redux. To make this happen Redux simply provides a\u00a0 subscribe() function to allow register event listener on state change. This is Observer pattern.<\/strong><\/p>\n

      componentDidMount() {\r\n  store.subscribe(() => this.forceUpdate());\r\n}<\/pre>\n
      The above code bind Redux state change with React forceUpdate function.<\/p>\n
       <\/p>\n
      createStore(reducer, [initState], [enhancer])<\/strong> function can be considered as an implementation of Factory pattern. <\/strong>it takes<\/p>\n
        \n
      • \n
          \n
        • reducer function which describe how state should be mutated by events<\/li>\n
        • initial state<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
          It returns a datastore object which provides<\/p>\n
            \n
          • \n
              \n
            • getState()<\/strong> function which returns the current state<\/li>\n
            • dispatch(event) <\/strong>function witch triggers actions defined in reducer<\/li>\n
            • subscribe(listener)<\/strong> function witch add a listener function on state change<\/li>\n
            • replaceReducer(reducer)<\/strong> function which replace current reducer stored on datastore object with a new one.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n
               <\/p>\n","protected":false},"excerpt":{"rendered":"
              Redux is an implementation of Flux pattern which aims to solve the state management issue in large scale complex react app.   Flux pattern at its core is pipe line: An action dispatches an event. Event is send at data store and triggers an mutation of the data. Then the data mutation triggers the view…<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[],"class_list":["post-424","post","type-post","status-publish","format-standard","hentry","category-front-end"],"_links":{"self":[{"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/posts\/424","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/comments?post=424"}],"version-history":[{"count":3,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/posts\/424\/revisions"}],"predecessor-version":[{"id":428,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/posts\/424\/revisions\/428"}],"wp:attachment":[{"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/media?parent=424"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/categories?post=424"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kernelio.com\/blog\/wp-json\/wp\/v2\/tags?post=424"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}