<\/p>\n

\n
• Redux is one of the most trending libraries for front-end development in today\u2019s marketplace.<\/li>\n
• There are three principles in redux:\n
  \n
  • Single source of truth<\/strong><\/li>\n
  • State\u00a0is read-only<\/em><\/strong><\/li>\n
  • Changes are made with pure functions<\/strong><\/li>\n<\/ul>\n<\/li>\n<\/ul>\n

    <\/p>\n

    Single source of truth:<\/strong><\/p>\n

    \n
    • The entire application is stored in an object\/ state tree within a single\u00a0store.<\/li>\n
    • It debugs or inspects the application and easier to keep track of changes over time.<\/li>\n
    • It has been traditionally difficult to implement – Undo\/Redo.<\/li>\n
    • If all of your states is stored in a single tree, it can be suddenly trivial to implement.<\/li>\n<\/ul>\n

      For<\/strong><\/em> example,<\/strong><\/em><\/p>\n

      <\/div>

      console.log(store.getState())\/* Prints{\u00a0 visibilityFilter: 'SHOW_ALL',\u00a0 todos: [\u00a0\u00a0\u00a0 {\u00a0\u00a0\u00a0\u00a0\u00a0 text: 'Consider using Redux',\u00a0\u00a0\u00a0\u00a0\u00a0 completed: true,\u00a0\u00a0\u00a0 },\u00a0\u00a0\u00a0 {\u00a0\u00a0\u00a0\u00a0\u00a0 text: 'Keep all state in a single tree',\u00a0\u00a0\u00a0\u00a0\u00a0 completed: false\u00a0\u00a0\u00a0 }\u00a0 ]}*\/<\/code><\/pre> <\/div>\n
      <\/p>\n
      State\u00a0is read-only:<\/strong><\/p>\n
      \n
      The only way to change the state is to emit an\u00a0action, an object describing what happened.<\/li>\n
      It ensures that neither the views nor the network callbacks will ever write directly to the state.<\/li>\n
      All changes are centralized and happen one by one in a strict order, there are no subtle race conditions to watch out for.<\/li>\n
      The minimal representation of data is just like state, the action is the minimal representation of the change to that data.<\/li>\n<\/ul>\n
      For<\/strong> example,<\/strong><\/p>\n
       
       <\/div> 
      store.dispatch({  type: 'COMPLETE_TODO',  index: 1})store.dispatch({  type: 'SET_VISIBILITY_FILTER',  filter: 'SHOW_COMPLETED'})<\/code><\/pre> <\/div>\n
      <\/p>\n
      Changes are made with pure functions:<\/strong><\/p>\n
      \n
      To specify how the state tree is transformed by actions, you write pure\u00a0reducers.<\/strong><\/li>\n
      Pure functions are\u00a0those whose return value depends solely on the values of their arguments.<\/li>\n
      Reducers are just functions, you can control the order in which they are called, pass additional data, or even make reusable reducers for common tasks such as pagination.<\/li>\n<\/ul>\n
      For<\/strong> example,<\/strong><\/p>\n
       
       <\/div> 
      function visibilityFilter(state = 'SHOW_ALL', action) {  switch (action.type) {    case 'SET_VISIBILITY_FILTER':      return action.filter    default:      return state  }}function todos(state = [], action) {  switch (action.type) {    case 'ADD_TODO':      return [        ...state,        {          text: action.text,          completed: false        }      ]    case 'COMPLETE_TODO':      return state.map((todo, index) => {        if (index === action.index) {          return Object.assign({}, todo, {            completed: true          })        }        return todo      })    default:      return state  }}import { combineReducers, createStore } from 'redux'const reducer = combineReducers({ visibilityFilter, todos })const store = createStore(reducer)<\/code><\/pre> <\/div>\n","protected":false},"excerpt":{"rendered":"
      Redux is one of the most trending libraries for front-end development in today\u2019s marketplace. There are three principles in redux: Single source of truth State\u00a0is read-only Changes are made with pure functions Single source of truth: The entire application is stored in an object\/ state tree within a single\u00a0store. It debugs or inspects the application […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"passster_activate_protection":false,"passster_protect_child_pages":"","passster_protection_type":"password","passster_password":"","passster_activate_overwrite_defaults":"","passster_headline":"","passster_instruction":"","passster_placeholder":"","passster_button":"","passster_id":"","passster_activate_misc_settings":"","passster_redirect_url":"","passster_hide":"no","passster_area_shortcode":"","gtb_hide_title":false,"gtb_wrap_title":false,"gtb_class_title":"","gtb_remove_headerfooter":false,"footnotes":""},"categories":[16542],"tags":[16826,16830,16821,16828,16827,16825,16824,16822,16829,16823,16820],"class_list":["post-4017","post","type-post","status-publish","format-standard","hentry","category-reactjs","tag-a-store-is-an-object-tree-in-redux","tag-changes-are-initiated-through-actions-in-redux","tag-fundamental-principles-of-redux","tag-list-down-the-components-of-redux","tag-reducer-in-redux","tag-reducers-are-a-pure-function-in-redux","tag-redux-concept","tag-redux-core-principles-explained","tag-the-following-statements-are-true-about-redux-except","tag-what-are-the-key-principles-of-redux","tag-what-are-the-three-principles-that-redux-follows"],"yoast_head":"\n