{"componentChunkName":"component---src-templates-blog-post-js","path":"/why-redux/","result":{"data":{"site":{"siteMetadata":{"title":"Noah's Web Dev Notes"}},"markdownRemark":{"id":"01301ac3-a252-5a49-8256-2231145abbfa","excerpt":"Redux itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and…","html":"<p><strong>Redux</strong> itself is a standalone library that can be used with any UI layer or framework, including React, Angular, Vue, Ember, and vanilla JS. Although Redux and React are commonly used together, they are <strong>independent</strong> of each other.</p>\n<p>To use <strong>redux</strong> inside a react app, you should use an official “UI binding library” called <strong>react-redux</strong></p>\n<p>You can start new apps with React Redux is by using the official Redux+JS template for Create React App:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\">npx create-react-app my-app --template redux</code></pre></div>\n<p>Or add it as a dependency for an existing react app:</p>\n<div class=\"gatsby-highlight\" data-language=\"text\"><pre class=\"language-text\"><code class=\"language-text\"># If you use npm:\nnpm install react-redux\n\n# Or if you use Yarn:\nyarn add react-redux</code></pre></div>\n<h2>Why using redux?</h2>\n<p>Redux allows you to manage your app’s <strong>state</strong> in a single place and keep changes in your app more predictable and traceable. It makes it easier to reason about changes occurring in your app. But all of these benefits come with tradeoffs and constraints. One might feel it adds up boilerplate code, making simple things a little overwhelming; but that depends upon the architecture decisions.</p>\n<h2>State management</h2>\n<p><strong>State management</strong> is essentially a way to facilitate communication and sharing of data across components. It creates a tangible data structure to represent the state of your app that you can read from and write to. That way, you can see otherwise invisible states while you’re working with them.</p>\n<p>Most libraries, such as React, Angular, etc. are built with a way for components to internally manage their state without any need for an external library or tool. It does well for applications with few components, but as the application grows bigger, managing states shared across components becomes a chore.</p>\n<p>In an app where data is shared among components, it might be confusing to actually know where a state should live. Ideally, the data in a component should live in just one component, so sharing data among sibling components becomes difficult.</p>\n<p>For instance, in React, to share data among siblings, a state has to live in the parent component. A method for updating this state is provided by the parent component and passed as props to these sibling components.</p>","frontmatter":{"title":"Why using redux in react?","date":"November 24, 2020","description":"This is about the cons of using redux in a react app."}},"previous":{"fields":{"slug":"/start-with-react.js/"},"frontmatter":{"title":"Start with React.js"}},"next":{"fields":{"slug":"/selector-vs-getElement/"},"frontmatter":{"title":"getElementById vs querySelector"}}},"pageContext":{"id":"01301ac3-a252-5a49-8256-2231145abbfa","previousPostId":"bf5f191d-58e1-5fa7-8c64-435b9a1be733","nextPostId":"9c3fdaf6-8dd3-5053-a5b7-9a4d3a2a3d39"}},"staticQueryHashes":["2841359383","3257411868"]}