{JSON.stringify(state1, null, 2)},
+ document.getElementById('root')
+);
+```
+
+Of course, Redux doesn't keep making more variables like this, but we'll get to a real implementation soon enough. The point is that the core of Redux is really just a piece of code that you write, a simple function that takes the previous state and an action and returns the next state. Why is that function called a reducer? Because it would plug right into a standard [`reduce`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) function.
+
+```js
+const actions = [
+ {type: CREATE_NOTE},
+ {type: UPDATE_NOTE, id: 1, content: 'Hello, world!'}
+];
+
+const state = actions.reduce(reducer, undefined);
+```
+
+After this, `state` would look identical to our previous `state1`:
+
+```json
+{
+ nextNoteId: 2,
+ notes: {
+ 1: {
+ id: 1,
+ content: 'Hello, world!'
+ }
+ }
+}
+```
+
+Play around with adding actions to our `actions` array and feeding them into the reducer [(JSFiddle link)](https://jsfiddle.net/justindeal/edogdh33/13/):
+
+```jsx
+const CREATE_NOTE = 'CREATE_NOTE';
+const UPDATE_NOTE = 'UPDATE_NOTE';
+
+const initialState = {
+ nextNoteId: 1,
+ notes: {}
+};
+
+const reducer = (state = initialState, action) => {
+ switch (action.type) {
+ case CREATE_NOTE: {
+ const id = state.nextNoteId;
+ const newNote = {
+ id,
+ content: ''
+ };
+ return {
+ ...state,
+ nextNoteId: id + 1,
+ notes: {
+ ...state.notes,
+ [id]: newNote
+ }
+ };
+ }
+ case UPDATE_NOTE: {
+ const {id, content} = action;
+ const editedNote = {
+ ...state.notes[id],
+ content
+ };
+ return {
+ ...state,
+ notes: {
+ ...state.notes,
+ [id]: editedNote
+ }
+ };
+ }
+ default:
+ return state;
+ }
+};
+
+const actions = [
+ {type: CREATE_NOTE},
+ {type: UPDATE_NOTE, id: 1, content: 'Hello, world!'}
+];
+
+const state = actions.reduce(reducer, undefined);
+
+ReactDOM.render(
+ {JSON.stringify(state, null, 2)},
+ document.getElementById('root')
+);
+```
+
+Now you can understand why Redux bills itself as "a predictable state container for JavaScript apps". Feed in the same set of actions, and you'll end up in the same state. Functional programming for the win! If you hear about Redux facilitating replay, this is roughly how that works. Out of the box though, Redux doesn't hold onto a list of actions. Instead, there's a single variable that points to the state object, and we keep changing that variable to point to the next state. That is one important mutation that **is** allowed in your app, but we'll control that mutation inside a store.
+
+## The Store
+
+Let's build a store now, which will hold onto our single state variable as well as some useful methods for setting and getting the state.
+
+```js
+const validateAction = action => {
+ if (!action || typeof action !== 'object' || Array.isArray(action)) {
+ throw new Error('Action must be an object!');
+ }
+ if (typeof action.type === 'undefined') {
+ throw new Error('Action must have a type!');
+ }
+};
+
+const createStore = (reducer) => {
+ let state = undefined;
+ return {
+ dispatch: (action) => {
+ validateAction(action)
+ state = reducer(state, action);
+ },
+ getState: () => state
+ };
+};
+```
+
+Now you can see why we use constants instead of strings. Our action validation is a little looser than Redux's, but it's close enough to enforce that we don't misspell action types. If we pass along strings, then our action will just fall through to the default case of our reducer, and nothing much will happen, and the error may go unnoticed. But if we use constants, then typos will go through as `undefined`, which will throw an error. So we'll know right away and fix it.
+
+Let's create a store now and use it.
+
+```js
+// Pass in the reducer we made earlier.
+const store = createStore(reducer);
+
+store.dispatch({
+ type: CREATE_NOTE
+});
+
+store.getState();
+// {
+// nextNoteId: 2,
+// notes: {
+// 1: {
+// id: 1,
+// content: ''
+// }
+// }
+// }
+```
+
+This is fairly functional at this point. We have a store that can use any reducer we provide to manage the state. But it's still missing an important bit: A way to subscribe to changes. Without that, it's going to require some awkward imperative code. And later when we introduce asynchronous actions, it's not going to work at all. So let's go ahead and implement subscriptions.
+
+```js
+const createStore = reducer => {
+ let state;
+ const subscribers = [];
+ const store = {
+ dispatch: action => {
+ validateAction(action);
+ state = reducer(state, action);
+ subscribers.forEach(handler => handler());
+ },
+ getState: () => state,
+ subscribe: handler => {
+ subscribers.push(handler);
+ return () => {
+ const index = subscribers.indexOf(handler);
+ if (index > 0) {
+ subscribers.splice(index, 1);
+ }
+ };
+ }
+ };
+ store.dispatch({type: '@@redux/INIT'});
+ return store;
+};
+```
+
+A little more code, but not **too** hard to follow. The `subscribe` function takes a `handler` function and adds that to the list of `subscribers`. It also returns a function to unsubscribe. Any time we call `dispatch`, we notify all those handlers. Now it's easy to re-render every time the state changes.
+
+```jsx
+///////////////////////////////
+// Mini Redux implementation //
+///////////////////////////////
+
+const validateAction = action => {
+ if (!action || typeof action !== 'object' || Array.isArray(action)) {
+ throw new Error('Action must be an object!');
+ }
+ if (typeof action.type === 'undefined') {
+ throw new Error('Action must have a type!');
+ }
+};
+
+const createStore = reducer => {
+ let state;
+ const subscribers = [];
+ const store = {
+ dispatch: action => {
+ validateAction(action);
+ state = reducer(state, action);
+ subscribers.forEach(handler => handler());
+ },
+ getState: () => state,
+ subscribe: handler => {
+ subscribers.push(handler);
+ return () => {
+ const index = subscribers.indexOf(handler);
+ if (index > 0) {
+ subscribers.splice(index, 1);
+ }
+ };
+ }
+ };
+ store.dispatch({type: '@@redux/INIT'});
+ return store;
+};
+
+//////////////////////
+// Our action types //
+//////////////////////
+
+const CREATE_NOTE = 'CREATE_NOTE';
+const UPDATE_NOTE = 'UPDATE_NOTE';
+
+/////////////////
+// Our reducer //
+/////////////////
+
+const initialState = {
+ nextNoteId: 1,
+ notes: {}
+};
+
+const reducer = (state = initialState, action) => {
+ switch (action.type) {
+ case CREATE_NOTE: {
+ const id = state.nextNoteId;
+ const newNote = {
+ id,
+ content: ''
+ };
+ return {
+ ...state,
+ nextNoteId: id + 1,
+ notes: {
+ ...state.notes,
+ [id]: newNote
+ }
+ };
+ }
+ case UPDATE_NOTE: {
+ const {id, content} = action;
+ const editedNote = {
+ ...state.notes[id],
+ content
+ };
+ return {
+ ...state,
+ notes: {
+ ...state.notes,
+ [id]: editedNote
+ }
+ };
+ }
+ default:
+ return state;
+ }
+};
+
+///////////////
+// Our store //
+///////////////
+
+const store = createStore(reducer);
+
+///////////////////////////////////////////////
+// Render our app whenever the store changes //
+///////////////////////////////////////////////
+
+store.subscribe(() => {
+ ReactDOM.render(
+ {JSON.stringify(store.getState(), null, 2)},
+ document.getElementById('root')
+ );
+});
+
+//////////////////////
+// Dispatch actions //
+//////////////////////
+
+store.dispatch({
+ type: CREATE_NOTE
+});
+
+store.dispatch({
+ type: UPDATE_NOTE,
+ id: 1,
+ content: 'Hello, world!'
+});
+```
+
+[Play with the code](https://jsfiddle.net/justindeal/8cpu4ydj/27/) and dispatch more actions. The rendered HTML will always reflect the store state. Of course, for a real app, we want to wire up those `dispatch` functions to user actions. We'll get to that soon enough!
+
+## Bring Your own Components
+
+How do you make components that work with Redux? Just make plain old React components that take props. You bring your own state, so make components that work with that state (or parts of it). There are some nuances that **might** affect your design later, particularly with respect to performance, but for the most part, boring components are a good place to start. So let's do that for our app now.
+
+```jsx
+const NoteEditor = ({note, onChangeNote, onCloseNote}) => (
+