<h2>Introduction to the course</h2><p>Redux, initially released 7 years ago is a free, open-source  JavaScript library. The purpose of Redux is to manage the application state. </p><p>Redux is usually paired with React or Angular and acts as a bridge for data whenever application turn more and more complex.</p><h2>Who is this course for?</h2><p>If you&#x27;re looking to add a new layer to your React and JavaScript base and transform your applications by making them more scalable, you&#x27;ll need to use a state-management library.</p><p>Redux is the most famous, and efficient state management library, so you&#x27;re where you need to be. </p>

Redux

<h2>What does this lesson cover?</h2><p>Reducers are a pure Redux function, but the uniqueness they bring to Redux is unmatched. </p><p>The focus will be on uncovering the unique abilities of Reducers that are hidden in their syntax, structure requirements, prerequisites, and more.</p>

Introduction

<h2>What does the lesson cover?</h2><p>After briefly recapping stores we set our focus on the three main methods that a store offers.</p><p>They are: getState, dispatch, and subscribe. </p><p>In this lesson, we&#x27;ll be going over those three methods, covering their syntax and behavior in code. </p>

Configuring Store

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll be referring to additional concepts that are used in Redux but are also generally associated with Redux as well.</p><p>Concepts like state, view and action. After the help of quizzes and individual references to each of thee mentioned concepts, we introduce Immutability. Immutability in Redux is widely used and common, thus its seperate reference.</p>

Overview and Concepts

<h2>What does this lesson cover?</h2><p>Everyone has heard of Redux, we know it&#x27;s associated with React but how do we actually define Redux?</p><p>In this lesson we&#x27;ll be scratching the surface of Redux, expanding on its purpose and usage, libraries, principles, a short list of prerequisites, and finally, how and why we&#x27;ve been associating it with React all this time.</p><p>With the help of individualized lesson challenges and quizzes, we&#x27;ll finalize the first step of our Redux journey.</p>

<h2>What does this lesson cover?</h2><p>In this lesson, we’ve narrowed the scope of reducers. Structure logic and flow, though touched on in previous lessons, required a more in-depth look.</p><p>We talk more about reducer responsibilities, provide an example of reducers that follow those responsibilities, and cover topics such as State Shape, and Splitting Up Reducer Logic.</p>

Overview

<h2>What does this lesson cover?</h2><p>In relatively big web applications there’s an overload of code that hinders the loading of your app, hence the introduction of code-splitting. In this lesson, we&#x27;ll not only describe the concept of code-splitting as a whole, in all programming languages and libraries, but we&#x27;ll refer to specific aspects of Redux Code-Splitters.</p><p>We&#x27;ll refer to famous methods used for code splitting while providing their syntax and structure paired with supporting lesson quizzes.</p>

Code Splitting

<h2>What does this lesson cover?</h2><p>In this lesson we&#x27;ll be covering an essential part of the app structure in Redux: slices.</p><p>A slice concentrates on only one feature in your application and provides a collection of reducer logic and actions. </p><p>This lesson expands further on the definiton of slices and depicts how to create a slice.</p>

App Structure

<h2>What does this lesson cover?</h2><p>After the Redux trailer, it&#x27;s time for you to get onboard and take the steering wheel.</p><p>In order to work with Redux, you&#x27;ll need to install it, which may seem simple at first, but it&#x27;s more complicated than it might seem.</p><p>Installing any application requires attention, and at first glance, you may not know what you need. </p><p>In this lesson, we&#x27;ll go through a step-by-step guide of how to install Redux and setup the environment.</p>

Installation

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll get associated with the combineReducers function, a must when splitting Reducers, slices, etc.</p><p>We&#x27;ll be referring to the reducer&#x27;s syntax and behavior in code.</p><p>We&#x27;ll even take a step beyond combining reducers and dip our toe into other topics.</p>

combineReducers function

<h2>What does this lesson cover?</h2><p>Whenever a user interacts with an application, server-side rendering comes in to manage the first ever render.</p><p>This concept proves important in Redux. This lesson will expand further on The Redux Server Side, the handleRender() method,  requests in Redux, etc.</p><p>We&#x27;ll also be providing code snippets from standard Redux code to depict the usage of unfamiliar methods.</p>

Server Rendering

<h2>What does this lesson cover?</h2><p>As all applications presumably get more and more complex in time, adding new features and functionality gets harder to implement.</p><p>Redux follows a one-way data flow that is made up of essentially the following structure:</p><p>The state describes the shape of the applications, state-dependent rendering of the User Interface, and the remaining sequence of steps.</p><p>This lesson aims at explaining the data flow in Redux with a problem and solution method.</p>

Data Flow

<h2>What does this lesson cover?</h2><p>In this lesson we&#x27;ll be covering the core concepts of Redux. Before creating our first application, developers will need some background knowledge on Redux.</p><p>We&#x27;ll be expanding on terms like Reducers, Actions, Stores, and Action Creators.</p><p>With the help of supporting lesson quizes, developers will comprehend the basic fundal=mentals of React.</p>

Core Concepts

<h2>What does this lesson cover?</h2><p>In this lesson we&#x27;ll be going over one of the dillemas developers go thorugh. We call it: Handling Nested Data.</p><p>Nested data brings forward many difficulties in the overall development of your application, hence it&#x27;s best to keep your data in a normalized form. What does that mean? Our aim here is to answer that question.</p>

Normalizing State Shape

<h2>What does this lesson cover?</h2><p>JavaScript single-page applications are getting more and more complicated, meaning state logic is constantly and excessively growing in complexity.</p><p>What does this mean for Redux?</p><p>Developers need to gradually get the hang of handling more and more state with Redux.</p><p>This lesson covers the thought-process and planning that goes into state management with Redux.</p>

Thinking in Redux

<h2>What does this lesson cover?</h2><p>The Redux sub-app approach is widely used when working with so-called &quot;big&quot; apps.</p><p>We&#x27;ll be getting into this term in this current lesson, mostly to assess where to use it as Redux provides alternatives with slight yet existing differences.</p><p>We&#x27;ll also refer to code snippets with supporting examples that will help developers get the hang of Redux sub-apps.</p>

Redux Sub-Apps

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll be uncovering simple examples where developers encounter the usage of data in an application.</p><p>We&#x27;ll be working with Single Posts and conducting important actions with the said posts like editing posts, and preparing action payloads.</p>

Using Data

Lesson Challenge

<h2>What does this lesson cover?</h2><p>As applications grow, developers will notice patterns in the reducer logic. Meaning, the same type of work will be executed for different data types. </p><p>In this lesson, we&#x27;ll be covering the wrong and right ways to handle duplications and replace them will the option to simply reuse reducer logic.</p>

Reusing Reducer Logic

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll be covering Async Logic and Data Fetching with Redux Middleware.</p><p>We&#x27;ll be expanding on and working with mainly Thunk Functions and Async Thunk Logic.</p><p>The lesson is equipt with lesson quizzes and code examples all throughout.</p>

Async Logic & Data Fetching

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll be covering the Redux Toolkit which proves essential for the development course of your application. The Redux Community highly recommends using Redux Toolkits and we&#x27;ll be expanding on why.</p><p>We&#x27;ll also define the APIs that the Redux Toolkit offers for a better development experience.</p>

Redux Toolkit

<h2>What does this lesson cover?</h2><p>In this lesson, we expand on updating nested objects and array items in different ways. There are specific methods designed for updating specific aspects of Redux.</p><p>Our aim is to uncover those methods and differentiate between them with the help of code examples provided for each individual method and lesson quizzes that support purpose-oriented learning.</p>

Immutable Update Patterns

<h2>What does this lesson cover?</h2><p>TypeScript is defined as a typed superset of JavaScript that offers compile-time checking of source code.</p><p>The Redux Community strongly encourages the use of TypeScript in Redux applications. </p><p>So should you or should you not use TypeScript? Luckily, not everything is a requirement. After this lesson, and after critically weighing the pros and cons developers choose for themselves.</p>

Usage with TypeScript

<h2>What does this lesson cover?</h2><p>In this lesson, we&#x27;ll be referencing the ineefiicency that developers meet when components re-render every time a state is updates, of course this is mandatory for some components but when components that don&#x27;t have the need to re-render– re-render, the performance of your application drops.</p><p>We&#x27;ll be covering how to fix that  in this lesson.</p>

Performance

<p>As all applications presumably get more and more complex in time, adding new features and functionality gets harder to implement.</p>

<p>Redux follows a one-way data flow that is made up of essentially the following structure:</p>

<p>Firstly, the state describes the shape of the applications.</p>

<p>Thus, the User Interface, that’s dependent on the state, is rendered. The state is updated based on User Interaction, thus the UI re-renders based on the said state.</p>

The Problem

<p>A common issue that developers would face is the lack of simplicity in their applications. A wide range of components utilizing the same state would result in difficulties, specifically, when the said component paths are in different areas of the application.</p>

<p>A solution to this problem would be the one way to solve this is to extract the shared state from the components and put it into a centralized location outside the component tree.</p>

<p>With this, our component tree becomes a big &quot;view&quot;, and any component can access the state or trigger actions, no matter where they are in the tree!</p>

The Solution

<p>By defining and separating the concepts involved in state management and enforcing rules that maintain independence between views and states, we give our code more structure and maintainability.</p>

<p>This is the basic idea behind Redux: a single centralized place to contain the global state in your application, and specific patterns to follow when updating that state to make the code predictable.</p>

<h2>What does this section cover?</h2><p>This section serves as both an easy introduction and a deep dive into Redux techniques while simultaenously keeping the perfect balance.</p><p>We&#x27;ll start off with with an overall Redux intro and environment setup after which we&#x27;ll get into some essential concepts and background to get down the theoretical part of Redux before working with web applications.</p>

Get Started

<h2>What does this section cover?</h2><p>In this section, we&#x27;ll be getting into the fundamentals of Redux.</p><p>This includes its ecosystem, core concepts, app structure, data flow, performance, and async logic &amp; data fetching.</p>

Redux Fundamentals

<h2>What does this lesson cover?</h2><p>We’ve referred to stores in previous lessons as one of the four core concepts of Redux, now we&#x27;ll be assessing the three main methods that a store with their corresponding syntax and structure requirements when implementing them into code.</p><p>Thus, we&#x27;ll focus on the configureStore method, what it means, and why we need it.</p>

Using Redux

<h2>What does this section cover?</h2><p>In this section, we&#x27;ll be getting into the concept of Reducers in Redux. Reducers are one of the essentials and core concepts in Redux that offers a wide range of usage.</p><p>We&#x27;ll be defining these pure functions thoroughly for the first lessons before easing into their syntax and usage in code. We&#x27;ll thus cover Reusing Reducer Logic, Initializing and working with State, etc,</p>

Redux

Achievements

The Solution

Learn programming and get hired