## Embedded React Examples

Here are two examples of ways to create an embedded React component.  One with Redux and one without.

Looking at these two examples it is clear that the updaters (non-Redux) pattern is more concise and simple.  It is the first thing that someone would think to do if they are embedding a React component.  This begs the question "Why did the Redux folks see this pattern and then choose to add the additional features that they added?"  The main features of Redux are standard actions, reducers, middleware, and connect:

## Standard Actions
- Models user/other actions as a category of things that are not coupled to the changes they cause
- Allows introspection of state-which-causes-an-update
- Provides consistency across Redux apps

## Middleware
- Allows separating logic over the time dimension
- Provides a clear hook for things such as tracking/logging

## Reducers
- Decouples state updates from user actions
- Decouples state updates from global state shape

## Connect
- Prevents prop drilling
- Enables clear separation of concerns between component

After refactoring a simple embedded React component many times, you will end up with Redux.  Not something Redux-ish.  You will have Redux exactly.  Redux solves a well-defined set of problems in a clear, human-centered way.  I am willing to say this about very few bits of engineering but Redux **cannot be improved on**.  Redux is 2.6kb of pure goodness.