Зміст курсу
Introduction to Redux
Introduction to Redux
2. Fundamental Concepts
Understanding the Counter Application
This chapter will be mostly focused on looking at and understanding code. The explanations will be limited to the reader, then look at the code themselves and make connections based on what we learned in the previous chapters.
This chapter will look at the Counter app with the Redux template. When we run the default application, we see the following screen:
Following is the file structure of the Redux app highlighting the files we want to look at:
src
app
store.js
features
counter
counter.js
counterAPI.js
counterSlice.js
App.js
index.js
We will first look at the store.js
file to get an idea of the structure of the Redux store:
It has a single slice and is handled by the reducer counterReducer
. Let’s look at the sliced code inside the counterSlice.js
file:
The initial state is set to the following:
It has reducers, namely increment
, decrement
, and incrementByAmount
. It also has two thunk functions. The first thunk function is the following:
It fetches data from a pseudo-API in the counterAPI
file. It is nothing but a timer that delays sending the data by 500 ms:
The following reducers are handling it:
While it's waiting for the data, the status
key is set to loading
and when it is done, it is set back to idle
.
The second thunk function simply dispatches another action based on the current state, conditionally:
There is also a selector being exported from the file:
Now that we know what's in the slice, let’s look at the entry point of the application index.js
:
We enclose the top-level component into <Provider>
tags and set the store
attribute to the imported store.
The top-level component is from the App.js
file:
The top-level components have the following elements:
In the start, the actions, thunks, and selector has been imported. Along with that, the relevant functions from react-redux
:
The selector has been set to the count
constant in the following lines. You will also notice a local state variable, incrementAmount
. We don’t want to store this variable in the Redux store since we don’t want to make this state value accessible from other components.
In the following section, we use the selector to display the count and use the dispatch
function to dispatch relevant actions on button clicks for decrementing or incrementing the count:
In the next <div>
, we have buttons for incrementing by amount. In this case, we also pass arguments into the dispatch actions, which go into the payload
:
Recall that payload
is a key inside the action
argument, which can be accessed from the reducers.
Все було зрозуміло?