Official redux logo from https://github.com/reactjs/redux/tree/master/logo Pre requisites: the reader is already knows JavaScript & React. If not, please read first. It is a refresher into frontend engineering with React. this According to the , is a state container for apps. official documentation Redux predictable JavaScript So to start with, let us begin with a why. It is mainly three-fold: Pure function Depth agnostic state subscription Ease of testing Pure function A function that operates solely on the passed in arguments and has no side effects is a Pure Function. Definition: In math, we have . In JavaScript, we have, sin(x) const sum = (a, b) => a + b; Because the function works solely off the passed in inputs, given arguments are the same, it will produce the same output irrespective of the number of times or under what conditions we invoke it. sum As in, will always return to 9. Time and again. Without fail. sum(4, 5) Like our is . sin(x) sum(x, y) predictable How does it apply to redux? Redux is based on the idea that there should be only a single source of truth for your application state, be it UI state like which tab is active or Data state like the user profile details: {first_name: 'John',last_name: 'Doe',age: 28',} All of these data is retained by redux in a closure that redux calls a . It also provides us a recipe of creating the said store, namely . **store** createStore(x) The function accepts another function, as an argument. The passed in function is responsible for returning the state of the application at that point in time, which is then persisted in the store. createStore x This passed in function is known as the . **reducer** This is a valid (but not exactly useful) reducer function: export default function reducer(state={}, action) {return state;} Redux has this concept of . An action is a plain old JavaScript object of the following shape: actions {type: 'SOME_NAME',payload: 'SOME FREE FORM DATA'} For example, say we have a micro blogging site and a user posts some content. This is what the resulting action could look like: {type: 'Add_USER_POST',payload: {content: 'A quick brown fox jumped over the lazy dog',}} Now, this action is passed into the to come up with the updated state as a function of the passed in . reducer action To handle it, let us update our to this: reducer export default function reducer(state = {posts: []}, action) {switch (action.type) {case 'Add_USER_POST':return {...state,posts: [...state.posts,{content: action.payload.content,}]}; default:  
        return state;  
} } First, we added a default property to our default state and initialised it with . posts [] Next, we simply added a block that switches on . Because our action had a type of it will be intercepted by the 1st case in our reducer’s and it will return a fresh object composed out of our existing state and add the newly added post to the posts array. switch-case action.type Add_USER_POST switch-case This returned object will then be added to the store. One important thing to note in here is that the store can only be updated by dispatching an action. Your App dispatches an , it is passed into ; the returns a fresh instance of the state; the store notifies your App and it can begin it’s re render as required. action reducer reducer The exposes 3 functions: , & . store dispatch getState subscribe as the name suggests, dispatches actions to be consumed by the reducer. dispatch returns the snapshot of your application state at this moment. getState accepts a callback function that is fired for every modification / update to the state tree. subscribe These are used by UI library specific bindings to handle the redux to app bridge. For , the recommended binding is . React react-redux Say we have a component that renders a list of posts. This is how we write it: Posts import React, { Component } from 'react';import { connect } from 'react-redux'; class Posts extends Component {render() {const posts = this.props.posts.map((post, i) => (<li key={i}>{post.content}</li>));return (<h3>Posts</h3><ul>{posts}</ul>)}} const mapState = state => ({posts: state.posts,}); const mapDispatch = dispatch => ({}); export default connect(mapState,mapDispatch)(Posts); As you can see, the component simply receives the list of posts as props and renders it as received. Posts We define two functions: & and pass them as callbacks to . mapState mapProps connect The does a and provides the current snapshot of state to as argument; connect getState mapState it then passes function as an argument to and finally passes in the component to the function returned by the call. dispatch mapDispatch Posts connect(x, y) Internally, it subscribes to the state changes and passes data all the way to the component to see if a re render is required. One can argue it is too much work for a simple app and single source of truth can be implemented in pure React with state in some top level component and passing it down as props. However, as your app grows, you add tens of more components and every single time you need to pass in data from top root all the way to leaf components. Needless to say, it can quickly become cumbersome. Redux allows us to subscribe to any part of the state tree from any depth. Depth agnostic state subscription As we have seen, our component can simply subscribe to the property in the store. Posts posts The component has absolutely no relation to its parent; as in it can be in an n-level depth and it’s logic or it’s parent/rendering component’s logic will not change. Posts Say you have a search feature that renders a which ultimately renders a set of component. Both & can directly subscribe to the store. SearchBar SearchItems <SearchBar/> <SearchItems/> Tomorrow, there can be a requirement to move the search inside the component and other than the CSS changes, component hierarchy wise, all we have to do is cut-paste. Posts Ease of testing Because reducers are all pure functions, there is no mocking effort required when we write unit tests for them. Simply pass in the and expect a state snapshot in return. Your application logic can now be fully unit tested and as such bulletproof. action Take redux for a spin at . Alternatively, play around with the embed here (scroll down till end). stackblitz Thanks for reading. Hit *clap* if you think this was worth your while :) Find me on or revert back to me on comments. linkedin

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

How to Redux with React

Too Long; Didn't Read

Rohan Bagchi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

How to Redux with React

Too Long; Didn't Read

Rohan Bagchi

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES