Redux tutorial for 12 year olds.

React components communicate to each other using states and props. But in large applications, passing states between components becomes difficult. Thus redux comes into play. Redux is a state management library. This tutorial will teach you redux basics in the most gentle way possible and then quickly help you write a small piece of code which will demonstrate its working.

Redux has four components:

  1. Store: It is a place which contains the state of the application. Whenever we have to get the app state, we do so by interacting with the store.
  2. Reducer: It is a function which takes state and action as inputs and then uses them to do something.
  3. Subscribe: It is use to get the current state from the store.
  4. Dispatch: This function is used to send new state to the store.

We will try to write a piece of code which will clarify these things. First of all you have to create a React application using create-react-app. Just fire your terminal, CD to you preferred location and type:

npx create-react-app my-app

Now CD to the newly created my-app folder. Now to install Redux, type:

npm i redux --save

Once you have installed redux, open my-app directory in your preffered code editor. Now open src folder, create a new file called ReduxDemo.js . Inside this file, let us import the required libraries and write some basic boilerplate as well.

import React, { Component } from 'react';
import { createStore } from 'redux';

class ReduxDemo extends Component {
  render() {
    // code goes here.
  }
}

export default ReduxDemo;

Now inside render() method, we will start creating the above discussed components one by one. First let us create the reducer.

import React, { Component } from 'react';
import { createStore } from 'redux';

class ReduxDemo extends Component {
  render() {
    // create reducer:
    const reducer = function(state, action) {
      if (action.type === 'attack') {
        return action.payload;
      }
      return state;
    };

  }
}

export default ReduxDemo;

As discussed, our store takes state and action as input and then doing ‘something’ using them. What this ‘something’ is will be clear to you in some time, just hang on a little bit.

Now we will create the store. Continuing the above code, inside the render() method, under the reducer, goes the store:

// create store: reducer and state
const store = createStore(reducer, 'Peace');

Here we used the createStore() method and passed the reducer and current state to it. The current state, as you might have guessed is ‘Peace’.

Now let us create the subscribe function. So continuing inside the render() method, we write:

// subscribe.
store.subscribe(() => {
  console.log('store is now: ', store.getState());
});

As you can see, the store.subscribe() method returns the current state from the store using the getState() function.

Now finally, we have to write the dispatch function. Here it goes:

// dispatch
store.dispatch({ type: 'no attack', payload: 'Iron Man' });
return <div>test</div>;

Dispatch function is used to pass new state to the store. Here the new state is ‘no attack’. Also we can send an attached payload along with the state which can be used by the reducer to do something.

The full code looks like this:

import React, { Component } from 'react';
import { createStore } from 'redux';
class ReduxDemo extends Component {
  render() {
    // create reducer: state and action
    const reducer = function(state, action) {
      if (action.type === 'attack') {
        return action.payload;
      }
      return state;
    };
    // create store: reducer and state
    const store = createStore(reducer, 'Peace');
    // subscribe.
    store.subscribe(() => {
      console.log('store is now: ', store.getState());
    });
    // dispatch
    store.dispatch({ type: 'no attack', payload: 'Iron Man' });
    return <div>test</div>;
  }
}
export default ReduxDemo;

Now run this application using the command:

npm start

Now browse to localhost:3000, and open browser console. In the console, you must be seeing:

store is now: Peace

This is because, in the dispatch function, we passed ‘no attack’ as the state. So in the reducer function, which looks like this:

const reducer = function(state, action) {
  if (action.type === 'attack') {
    return action.payload;
  }
  return state;
};

Reducer checks if the newly passed state is ‘attack’, if yes, it will return the payload sent through with dispatch() function. But since we passed ‘no attack’, it returns the current state, which is ‘Peace’.

Now inside the dispatch() function, change ‘no attack’ to ‘attack’. Rerun the server and again check the console. Now the console will show:

store is now: Iron man

This happened because now we passed ‘attack’ through dispatch() function. Thus the code inside the if block of the reducer runs and the state is changed to ‘Iron man’.

This is how we can change state of the application through redux. We could also create a button, clicking which would trigger an event, changing the state of the app in a similar way.

This was a very basic intro tutorial for redux. Feel free to learn more! Hope you liked the article. Comment in case of any doubts. Also check out my articles on medium and follow me on twitter. Also check out my other articles on this blog as well!

One Reply to “Redux tutorial for 12 year olds.”

Leave a Reply

Your email address will not be published. Required fields are marked *