Basic Terms in Redux

In this lesson we'll briefly go over the basic concepts and terms that you'll need to know to further explore Redux.

We'll start with action. This is some event that describes what happened in our application. Technically, this is a regular JavaScript object containing a type field, where we write the name of the action.

The second important field of the action object is the payload field. It will contain the payload of the action. The payload is some data that is passed as parameters to the action.

This object may also contain other fields with additional information.

Let's create an action for example and call it addOrderAction. Let it be responsible for adding an order. So in the type property we will indicate that the order has been added (orderAdded) to orders (orders). And in payload we will indicate in more detail what kind of order it is, for example, to paint a wall:

const addOrderAction = {
	type: 'orders/orderAdded',
	payload: 'Paint a wall'
}

In order not to write an object with an action manually each time, we can use the so-called action creator - a function that will create and return an object with an action to us. Let's call it addOrder. As a parameter, we will pass it the text we need for the payload property:

const addOrder = text => {
	return {
		type: 'orders/orderAdded',
		payload: text
	}
}

The next important concept in the chain is the reducer - a function that takes the current state and an object with an action. This function decides how to update the state and returns an already updated state if necessary.

The next concept is store - this is an object that stores the current global state of the Redux application. This object has a getState method, with which you can get the current value of the state.

The store also has a dispatch method. Calling it and passing an object with an action is the only way to change the state. As a result, the store will run the reducer function and save the new state value.

The last concept we'll cover in this tutorial is selectors. Selectors are special functions that know how to extract information from the state stored in the store. These functions are especially useful as your application grows and help avoid code repetition.

We will learn more about all these concepts and their practical application in the following sections of this textbook.