The Guide To Core Redux Concepts

Tram Ho

The article is translated from the source: https://hackernoon.com/the-guide-to-core-redux-concepts-ncu3tcw

In a React application, data is fetch in the parent component and then passed to the child component via props .

Things get complicated when there are multiple classes of component and props / state (and function that change this state ) are passed through multiple component to go from origin to destination. This link can be difficult to remember, and it leaves lots of room for errors.

This doesn’t mean that data is no longer passed from parent component to child component via props . Instead, this path can now be direct, with no props passed from the parent component to the child of child component .

What is Redux?

It’s basically your state management library, usually paired with React, where it controls the state and puts it in a centralized place called the store .

This time, when a component starts to change, that information goes straight from it (blue circle) to the store . From there, subsequent changes will be directed to all component need updating.

Before diving into the code , you should think about how Redux works conceptually. The diagram below illustrates a typical Redux flow.

Store

Redux Store keeps your App state . There are 3 important concepts:

  • getState() gives you access to the state (store) of the App
  • dispatch(action) allows update state (store)
  • subscribe(listener) to register listeners, allowing you to triger at all times

Action

In Redux, the action provides information to the store . Although Redux is different from MVC, the action basically equivalent to a pattern in MVC. It has two parameters:

The first is the type , there must be. payload can be anything that describes the data being transferred. With this data in action , reducer will update store .

Reducer

Reducer performs an action and is based on type . It determines what needs to be done with the data (ie how it will affect the store ). Reducer is where the store is updated.

State

Finally, the state is stored in the store . That’s a concept you should be familiar with with React . In short, it’s an object that represents the dynamic parts of the application: anything that can be changed on the client-side .

Try creating a simple App using redux

Simple App use Redux

Step 1

Create App

Step 2

Install dependencies:

Step 3

Create the necessary files according to the following directory structure:

Step 4

To setup UI for the app, create scr/component/posts.js

Add the action.js file

We will define the actions, be it objects or strings

Now we will create reducer.js file

And the file store.js

Once all reducer have been created, we need to use fucntion createStore and introduce the newly created reducer

Finally, create the App.js file

ReduxProvider is a type of component that can pass store to child components through function connect (imported from react-redux )

A simple App created like that, through here you can also roughly understand how to use Redux in your React App.

Thanks and hope this article is useful for your work

Share the news now

Source : Viblo