Core Redux API

Learn how to implement Redux state-management into your application by learning the core methods of the Redux API.

Start

Key Concepts

Review core concepts you need to learn to master this subject

Installing Redux

Create the Redux Store

The getState() Method

The dispatch() Method

The subscribe() Method

Action Creators

Slices

The combineReducers() Function

Installing Redux

npm install redux

The redux package is added to a project by first installing it with npm.

Some of the resources imported from redux are:

createStore
combineReducers

Intro to the Core Redux API

Lesson 1 of 2

1
What is the Redux API?
In this lesson, you will learn how to apply the core concepts of Redux to a real Redux application. Remember, Redux applications are built upon a one-way flow of data model and are managed by the …
Start
2
Install the Redux Library
The core concepts of Redux are closely tied to a framework known as Flux. Both share the same concept of a one-way flow of data and a centr…
Start
3
Create a Redux Store
As you know, every Redux application uses a reducer function that describes which actions can update the state and how those actions lead to the next state. For example, suppose you wanted to buil…
Start
4
Dispatch Actions to the Store
The store object returned by createStore() provides a number of useful methods for interacting with its state as well as the reducer function it was created with. The most commonly used method, st…
Start
5
Action Creators
As you saw in the last exercise, you are likely to dispatch actions of the same type multiple times or from multiple places. Typing out the entire action object can be tedious and creates opportuni…
Start
6
Respond to State Changes
In a typical web application, user interactions that trigger DOM events (“click”, “keydown”, etc…) can be listened for and responded to usin…
Start
7
Connect the Redux Store to a UI
Up until now, you have built a working counting application using Redux that lacks a proper user interface (UI). Let’s change that! The UI for this application should display the current count num…
Start
8
React and Redux
As you saw in the last exercise, Redux can be used within the context of any UI framework, though it is most commonly paired with React. This makes sense considering that React and Redux were both …
Start
9
Implementing a React+Redux App
Now that you have implemented the counter app using the HTML DOM API, and have seen a working React+Redux application, it is time to implement it using React. Take a look at the store.js file …
Start
10
Review
Congratulations! You were able to apply the core concepts of the Redux framework by implementing an application using the Redux library. By completing this lesson, you are now able to: * Install …
Start