{"componentChunkName":"component---src-templates-single-blogpost-js","path":"/blog/react-redux-state-management","result":{"data":{"contentfulBlogPost":{"title":"React Redux State Management","slug":"react-redux-state-management","id":"afcac439-cfd8-5c86-8f05-5158d1217de8","createdAt":"07. April 2020","category":[{"title":"React","slug":"react","id":"0bdfb3a0-b67b-5b9a-802a-7182aa70702b","blog_post":[{"title":"Default props in React and Gatsby","slug":"default-props-in-react-and-gatsby","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/5HHB28bEpN5I34ZZdu3T6r/ae699ca12a82905b64591a552b071664/person-using-black-and-white-smartphone-and-holding-blue-230544.jpg?w=800&q=50"}},"id":"dd733cf4-96d4-5258-8465-8424a9245301","createdAt":"16. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"props.children\nprops.data\nprops.pageContext (props)\n({data})\n(children)"}}},{"title":"React Redux State Management","slug":"react-redux-state-management","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/5vpI7eNBrlMWq9mc0ucW19/cc541144d5c6b22fed96aa516cd691ad/photo-of-imac-near-macbook-1029757.jpg?w=800&q=50"}},"id":"afcac439-cfd8-5c86-8f05-5158d1217de8","createdAt":"07. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"import {createStore} from 'redux'\nimport {useSelector, useDispatch} from 'redux' Store…"}}},{"title":"React Context","slug":"react-context","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/6qDqC1LGYCDammzZ04iofw/d9964648daeed720f472c470ea025ae8/macbook-laptop-smartphone-apple-7358.jpg?w=800&q=50"}},"id":"1bdbcd35-c152-524d-bdb0-0edddf5737c9","createdAt":"13. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"createContext\nuseContext"}}},{"title":"Axios - Fetching data from remote API on the client-side with React ","slug":"axios-fetching-data-from-remote-api-on-the-client-side-with-react","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/7AufkdJD8sNK4UOWWVPvb4/e93e260295fbff5f94dba3a4ae1db98f/information-sign-on-shelf-251225.jpg?w=800&q=50"}},"id":"d64cdbd2-e4b9-5820-9065-ba3c305fdf56","createdAt":"13. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"npm i axios"}}},{"title":"React Hooks - useState, useEffect, useContext, useRef, useMemo, useReducer, useCallback","slug":"react-hooks-usestate-useeffect-usecontext-useref-usememo-usereducer","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/3aWpunSqJ3zvCKn5Jw74bX/f9798361bc96ba1011ba2473b6520ca1/working-macbook-computer-keyboard-34577.jpg?w=800&q=50"}},"id":"3017584a-53a4-5553-ae0c-e4bf8e353dd4","createdAt":"03. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"useContext Create a Context Provider via createContext function Consum a Context via useContext…"}}},{"title":"Toggle elements in React using React Hooks","slug":"toggle-elements-in-react-using-react-hooks","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/1u4g6T8nqZJVOpuBQzLPYD/fe986d21e63c2d4554a3f3d3686475d5/apple-laptop-notebook-office-39284.jpg?w=800&q=50"}},"id":"8d50b6eb-b3e8-5467-87cc-cf77321eb8ca","createdAt":"03. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":""}}},{"title":"Swift Programming Tutorial for Beginners (Full Tutorial)","slug":"swift-programming-tutorial-for-beginners-full-tutorial","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/5vpI7eNBrlMWq9mc0ucW19/cc541144d5c6b22fed96aa516cd691ad/photo-of-imac-near-macbook-1029757.jpg?w=800&q=50"}},"id":"1bcb2ea5-62d7-5de8-a4cd-36e13e78d368","createdAt":"23. Februar 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"Learn how to code with Swift in one single tutorial! We'll go through all the core concepts of Swift…"}}},{"title":"IIFE","slug":"iife","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/7AufkdJD8sNK4UOWWVPvb4/e93e260295fbff5f94dba3a4ae1db98f/information-sign-on-shelf-251225.jpg?w=800&q=50"}},"id":"1f739d21-547b-5815-9549-ab94da356434","createdAt":"28. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":""}}},{"title":"Edit the default Theme in Material UI","slug":"edit-the-default-theme-in-material-ui","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/3aWpunSqJ3zvCKn5Jw74bX/f9798361bc96ba1011ba2473b6520ca1/working-macbook-computer-keyboard-34577.jpg?w=800&q=50"}},"id":"c3f5d0b2-3680-5bdf-8c40-4e8955faffc8","createdAt":"18. März 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"1. Create a Theme object 2. Pass Theme object to the ThemeProvider 3. Create Layout Component and…"}}}]},{"title":"Redux","slug":"redux","id":"89dcb61e-1b22-5795-9618-daa15e889512","blog_post":[{"title":"React Redux State Management","slug":"react-redux-state-management","image":{"fluid":{"src":"//images.ctfassets.net/843vngvcufpj/5vpI7eNBrlMWq9mc0ucW19/cc541144d5c6b22fed96aa516cd691ad/photo-of-imac-near-macbook-1029757.jpg?w=800&q=50"}},"id":"afcac439-cfd8-5c86-8f05-5158d1217de8","createdAt":"07. April 2020","childContentfulBlogPostContentTextNode":{"childMarkdownRemark":{"excerpt":"import {createStore} from 'redux'\nimport {useSelector, useDispatch} from 'redux' Store…"}}}]}],"content":{"childMarkdownRemark":{"html":"

import {createStore} from 'redux'\nimport {useSelector, useDispatch} from 'redux'

\n

Store & initialStore\nActions & ActionCreators\nReducer / RootReducer\nProvider / wrap entire Application

\n
    \n
  1. in initial_store.js create initialStore / initialState\nconst initialStore = {}
    2. \n
  2. in actions.js create the actions\nexport const EXAMPLEACTION = \"EXAMPLEACTION\"\nexport const OTHERACTION = \"OTHERACTION\"\nexport const SOMEACTION = \"SOMEACTION\"
    3. \n
  3. in reducer.js create the reducer
    4. \n
\n

import {EXAMPLE_ACTION} from './action.js'

\n

const reducer = (state, action) => {\nif(action.type === EXAMPLE_ACTION) {\nreturn {}\n}\nreturn { state }\n}

\n
    \n
  1. const store = createStore(reducer = initialStore)
    2. \n
\n

Store takes 2 Arguments

\n

dispatch() method sends the actions to the Store

\n

Reducer does NOT mutate the state, it returns a new State\nReducer is a Function and takes 2 Arguments\nfunction reducer(oldState, action) { console.log({oldState, action}) }\nReducer updates the Store

\n

mapStateToProps\nmapDispatchToProps

\n

Hooks version

\n

useSelector\nuseDispatch

","timeToRead":1}}},"allContentfulCategory":{"nodes":[{"title":"Google Tag Manager","slug":"google-tag-manager","id":"d0a285b4-b818-5612-8fdc-5f325aa48eb4"},{"title":"Axios","slug":"axios","id":"36071d22-d950-5e0e-8832-52a4f31016bf"},{"title":"Redux","slug":"redux","id":"89dcb61e-1b22-5795-9618-daa15e889512"},{"title":"Express","slug":"express","id":"eff898c7-be39-553c-a199-a8b67af03038"},{"title":"Node.js","slug":"node-js","id":"0c5ec24f-7db8-5e3c-bf01-d8dc8b8c4273"},{"title":"Git","slug":"git","id":"995d33c2-1a26-52b1-81b1-a7c5dfefbb4c"},{"title":"HTML","slug":"html","id":"368ff1b9-f81e-5748-8ea5-5c257ed913f9"},{"title":"GraphQL","slug":"graphql","id":"8101a2c8-2d15-5297-bfd1-d213d77b9ce8"},{"title":"Javascript","slug":"javascript","id":"c5c3bf5b-ef37-5b26-af84-dfb083fecabf"},{"title":"styled-components","slug":"styled-components","id":"f8aeb8c8-4780-5b97-a787-f278af851268"},{"title":"Material UI","slug":"material-ui","id":"9002ca9c-ae85-58b1-abd4-d467f490bec8"},{"title":"CSS","slug":"css","id":"334376eb-4c45-5412-8b19-80f1a16d19e5"},{"title":"Gatsby","slug":"gatsby","id":"8d653418-2491-59d6-a2ef-367d1a6d0a28"},{"title":"React","slug":"react","id":"0bdfb3a0-b67b-5b9a-802a-7182aa70702b"}]}},"pageContext":{"slug":"react-redux-state-management","title":"React Redux State Management"}}}