{"id":3208,"date":"2018-01-22T12:40:04","date_gmt":"2018-01-22T07:10:04","guid":{"rendered":"https:\/\/code4developers.com\/?p=3208"},"modified":"2018-01-27T17:38:14","modified_gmt":"2018-01-27T12:08:14","slug":"redux-example","status":"publish","type":"post","link":"https:\/\/code4developers.com\/redux-example\/","title":{"rendered":"Redux Example"},"content":{"rendered":"<p>In case you missed out the basic for redux, you can Find it <a href=\"https:\/\/code4developers.com\/redux\/\">Here<\/a><\/p>\n<p>A Redux Store consists of a few different parts. You always have a <strong>single<\/strong> store, that uses either a single Reducer or Multiple Reducers (through Redux\u2019s CombineReducers method). And you dispatch actions to your reducers. (You also have the initial state for each reducer, that is the default values).<!--more--><\/p>\n<ul>\n<li>Store is like an instance of a class. It contains the actual data.<\/li>\n<li>A reducer takes the current state + an action, applies it to the state and returns the new state.<\/li>\n<\/ul>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"atomic\">const initial_state = { data: 0 }\r\nconst reducer = (state = initialState, action) =&gt; {\r\n    switch (action.type) {\r\n      case 'INC':\r\n        return Object.assign({}, state, {data: state.data + action.NUMBER})\r\n      case 'DEC':\r\n        return Object.assign({}, state, {data: state.data - action.NUMBER})\r\n      default:\r\n        return state\r\n    }\r\n}\r\n\r\nfunction incrementData(dispatch) {\r\n  dispatch({TYPE: 'INC', NUMBER: 1})\r\n}\r\n\r\nfunction decrementData(dispatch) {\r\n  dispatch({TYPE: 'DEC', NUMBER: 1})\r\n}\r\nconst store = createStore(reducer)\r\n\/\/You can now send actions to the store, by using the store.dispatch method, or reading the current state by using store.getState()<\/pre>\n<p>If you look in the Code above you see everything you need to set up a basic redux setup. You can make it how simple or complex you want to. I personally just make multiple reducers, and action-creator methods that update them.<\/p>\n<p>The awesome thing about redux is that it isn\u2019t a \u201creact thing\u201d. This means that you could use the same state layer with any front end library or framework.<\/p>\n<p>If you want to use it with react then you need two things from the react-redux package: Provider and Connect.<\/p>\n<p>You place the around the JSX code in your ReactDOM render() method in your entry point. And then you use the connect() method to map functions and state elements to your components.<\/p>\n<p>You map state elements to your components so that what is in redux are passed as props to your components, and you map your action creators to your component through connect so that the action creators have access to your store\u2019s dispatch method.<\/p>\n<p>Something like this:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\" data-enlighter-theme=\"atomic\">connect(state =&gt; ({element: state.element }), dispatch =&gt; ({myActionCreator: () =&gt; myActionCreator(dispatch)})(MyComponent)<\/pre>\n<p>As usual, the code above is working, but you need to add some imports etc to have a working example.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In case you missed out the basic for redux, you can Find it Here A Redux Store consists of a few different parts. You always have a single store, that&hellip;<\/p>\n","protected":false},"author":7,"featured_media":3204,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[93],"tags":[94,101,99,102,103],"powerkit_post_featured":[],"class_list":{"0":"post-3208","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-react","8":"tag-react","9":"tag-react-redux","10":"tag-redux","11":"tag-redux-example","12":"tag-resux-store"},"jetpack_featured_media_url":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/01\/Redux.png?fit=312%2C244&ssl=1","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8NAi4-PK","jetpack-related-posts":[{"id":3202,"url":"https:\/\/code4developers.com\/redux\/","url_meta":{"origin":3208,"position":0},"title":"Redux","author":"Arif Khoja","date":"January 16, 2018","format":false,"excerpt":"Okay. So redux is a very simple solution to manage state. It has a few different parts, but none of them are difficult to understand, and it is very easy to work with. I don\u2019t think I ever see any bugs in that part of my code bases. Let\u2019s begin\u2026","rel":"","context":"In &quot;React&quot;","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2018\/01\/Redux.png?fit=312%2C244&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3171,"url":"https:\/\/code4developers.com\/programming-asynchronously-promises\/","url_meta":{"origin":3208,"position":1},"title":"Programming asynchronously: Promises","author":"Arif Khoja","date":"December 20, 2017","format":false,"excerpt":"Promises are in many ways the logical next step from callback. A promise is just a special object that promise to either resolve, or throw an exception. Promises are easy to use, and easy to make. For example this is how you use some kind of library that uses promises:\u2026","rel":"","context":"In &quot;JavaScript&quot;","block_context":{"text":"JavaScript","link":"https:\/\/code4developers.com\/category\/javascript\/"},"img":{"alt_text":"javascript","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/10\/javascript.jpg?fit=750%2C422&ssl=1&resize=700%2C400 2x"},"classes":[]},{"id":14686,"url":"https:\/\/code4developers.com\/unlocking-the-power-of-react-hooks\/","url_meta":{"origin":3208,"position":2},"title":"Unlocking the Power of React Hooks: A Comprehensive Guide with Examples","author":"Yatendrasinh Joddha","date":"October 15, 2023","format":false,"excerpt":"In the ever-evolving world of web development, React has been a game-changer. It simplifies building interactive and dynamic user interfaces. With React, you can create components, manage states, and handle side effects seamlessly. But as React evolves, so do the best practices and techniques for building applications. One significant improvement\u2026","rel":"","context":"In &quot;React&quot;","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2023\/10\/React-icon.svg_-1-e1697396875978.png?fit=250%2C217&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3194,"url":"https:\/\/code4developers.com\/react-hello-world-and-jsx\/","url_meta":{"origin":3208,"position":3},"title":"React: Hello World and JSX","author":"Arif Khoja","date":"January 8, 2018","format":false,"excerpt":"This is a typical Hello World implementation in React in JSX file. It shows one of two ways you can write components, and how you pass data to a components. import React, { Component } from 'react'; import ReactDOM from 'react-dom'; class App extends Component { render() { return (\u2026","rel":"","context":"In &quot;React&quot;","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"react","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3251,"url":"https:\/\/code4developers.com\/css-keylogger\/","url_meta":{"origin":3208,"position":4},"title":"CSS Keylogger","author":"Arif Khoja","date":"February 27, 2018","format":false,"excerpt":"This post is based on\u00a0Chrome extension and Express server that exploits keylogging abilities of CSS i.e. CSS Keylogger. Scary little attack using essentially a bunch of attribute selectors. This attack is really simple. Utilizing CSS attribute selectors, one can request resources from an external server under the premise of loading\u2026","rel":"","context":"In &quot;HTML\/Stylesheet&quot;","block_context":{"text":"HTML\/Stylesheet","link":"https:\/\/code4developers.com\/category\/htmlstylesheet\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/08\/css_image.png?fit=384%2C384&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3182,"url":"https:\/\/code4developers.com\/react-blog-post-serieses-react-development\/","url_meta":{"origin":3208,"position":5},"title":"React: A blog post series about React development","author":"Arif Khoja","date":"December 30, 2017","format":false,"excerpt":"One of the first things I wrote down in my notebook as I was planning or trying to figure out if there was enough stuff to write about to do this site was a React introduction. I know React fairly well, and have been working full-time with it for quite\u2026","rel":"","context":"In &quot;React&quot;","block_context":{"text":"React","link":"https:\/\/code4developers.com\/category\/react\/"},"img":{"alt_text":"react","src":"https:\/\/i0.wp.com\/code4developers.com\/wp-content\/uploads\/2017\/12\/react_2.png?fit=375%2C375&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3208","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/comments?post=3208"}],"version-history":[{"count":4,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3208\/revisions"}],"predecessor-version":[{"id":3215,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/posts\/3208\/revisions\/3215"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media\/3204"}],"wp:attachment":[{"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/media?parent=3208"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/categories?post=3208"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/tags?post=3208"},{"taxonomy":"powerkit_post_featured","embeddable":true,"href":"https:\/\/code4developers.com\/wp-json\/wp\/v2\/powerkit_post_featured?post=3208"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}