Core Concepts in Redux
Lesson 1 of 1
  1. 1
    Introduction to Redux
    Imagine a calendar app. One part of the app lists all of the events. Another part of the app sets filters on which types of events are shown. A third part of the app sets the current time zone and …
    Start
  2. 2
    One-Way Data Flow
    In most applications, there are three parts: * State – the current data used in the app * View – the user interface displayed to users * Actions – events that a user can take to change the state T…
    Start
  3. 3
    State
    State is the current information behind a web application. For a calendar application it includes the events (name, date, label, etc.), the current timezone, and the display filters. For a todo…
    Start
  4. 4
    Actions
    Most well-designed applications will have separate components that need to communicate and share data with each other. A todo list might have an input field where the user can type in a new todo …
    Start
  5. 5
    Reducers
    So far, we’ve defined the state of our application and the actions representing requests to change that state, but we haven’t seen how these changes are carried out in JavaScript. The answer is a _…
    Start
  6. 6
    Rules of Reducers
    In the previous exercise, we wrote reducers that returned a new copy of the state rather than editing it directly. We did this to adhere to the [rules of reducers provided by the Redux documentatio…
    Start
  7. 7
    Immutable Updates and Pure Functions
    In programming, there is a more general way to describe the three rules of reducers in Redux: reducers must make immutable updates and be pure functions. If a function makes _immutable updates…
    Start
  8. 8
    Store
    So far we have covered state, actions, reducers, and how they participate in the one-way data flow. Where, in JavaScript, does all of this take place? Redux uses a special object called the _stor…
    Start
  9. 9
    Review
    Congratulations! In this lesson you’ve built a strong conceptual foundation of Redux and built a state object, some actions, and a reducer along the way. Here’s what else you learned: * Redux is …
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo