More day 2 updates

This commit is contained in:
Elizabeth Craig
2019-02-28 21:26:06 -08:00
parent 24e0416935
commit 0d1160145a
5 changed files with 48 additions and 55 deletions

View File

@@ -1,4 +1,4 @@
# Step 2.5: Redux: Reducers (Demo)
# Step 2.5 - Redux: Reducers (Demo)
[Lessons](../) | [Exercise](./exercise/) | [Demo](./demo/)
@@ -12,9 +12,11 @@ f(data) => view
This is fine if the data never changes. However, React exists to deal with data updates via props (immutable) and state (changes based on `setState()` API). In the real world, data is shaped like a tree and view is shaped like a tree. They don't always match.
We can pass shared state data down to components using props and update it using callbacks, but as an application grows larger, passing around callbacks becomes unwieldy and the state data flow becomes hard to understand. To keep the application maintainable, we need a well-defined pattern for sharing and updating application state.
Facebook invented the [Flux](https://facebook.github.io/flux/) architectural pattern to solve this shared state issue. [Redux](https://redux.js.org/) is an implementation of Flux.
Redux is used inside many large, complex applications because of its clarity and predictability. It is really easy to debug and is easily extensible via its middleware architecture. In this lesson, we'll explore the heart of how Redux modifies state.
Redux is used inside many large, complex applications because of its clarity and predictability. It is easy to debug and easily extensible via its middleware architecture. In this lesson, we'll explore the heart of how Redux manages state.
Redux expects the data (store) to be a singleton state tree. It listens for messages to manipulate the state and passes updates down to views.
@@ -22,7 +24,7 @@ Redux expects the data (store) to be a singleton state tree. It listens for mess
### View
A view is a React components that consumes the store as its data. There is a special way Redux will map its data from the state tree into the different React components. The components will know to re-render when these bits of state are changed.
A view is a React component that consumes the store as its data. There is a special way Redux maps data from the state tree into the different React components. The components will know to re-render when these bits of state are changed.
### Action
@@ -38,7 +40,7 @@ There is a single dispatcher. It simply informs the store of all the actions tha
### Reducers
Redux uses **reducers** to manage state changes. This name comes from the "reducer" function passed to `Array.reduce()`.
Redux uses reducers to manage state changes. This name comes from the "reducer" function passed to `Array.reduce()`.
A Redux reducer is a simple stateless **pure function** (no side effects). Its only job is to change the state from one immutable snapshot to another. It takes state + an action message as input, makes a modified copy of the state based on the action message type and payload, and returns the new state. (Reducers should not modify the previous state.)
@@ -57,7 +59,7 @@ We won't be covering middleware much in these lessons since it's a more advanced
We begin the journey into Redux by looking at the store. The store consists of several parts:
1. **State/data** - We represent this both with an initial state and with a TypeScript interface.
2. **Reducers** - Responsible for reacting to action messages to change from a previous to the next state.
2. **Reducers** - Responsible for reacting to action messages to change from one state to the next.
3. **Dispatcher** - There should be only one dispatcher, which is exported by the store. We'll look at this in Step 6!
### Create store