Before we start implementing the elements of Redux, let's take a look at the data flow with Redux in one big picture—from an action getting dispatched to the updated application state:

It all starts with a call to store.dispatch(action), which means that some action happened (user action, request resolved, and so on). An action is a plain object that describes what happened:

{ type: 'CREATE_POST', user: 'dan', text: 'hello world' }

All examples in this book use the new JavaScript syntax ES6/ES2015. Newer browser and Node.js versions already support most of this syntax (at the time of this writing, import/export is not supported anywhere, except Babel). If we want to support older versions of browsers or Node.js, we will need to transpile your code to the older JavaScript version ES5 via a tool, such as Babel (https://babeljs.io/). In addition to transpiling, Babel also allows you to use JSX syntax (an extension of JavaScript used with React) and even the future JavaScript syntax, where the proposal is already finalized, but not implemented in any engines yet.

This section explains how to set up a complete...

In the first chapter, we learned how important actions are in Redux. Only actions can change the state of your application.

Redux actions are simple JavaScript objects with a type property, which specifies the name of the action.

Let's define a simple action, in the src/index.js file:

const createPost = { type: 'CREATE_POST', user: 'dan', text: 'New post' }
console.log(createPost)

Now, save the file. Webpack should automatically refresh the page after modifying and saving a source file (such as src/index.js).

In the first chapter, we learned about reducers, functions that take the current state and an action and return the new state of the application. As you now know, actions only describe what happened. Reducers use that information to compute the new state.

To be able to figure out state changes, we should first think about the state of our application. We have already done this in the first chapter, and our state looks as follows:

{ 
  posts: [ 
    { user: 'dan', category: 'hello', text: 'Hello World!' }, 
    { user: 'des', category: 'welcome', text: 'Welcome to the blog' } 
  ], 
  filter: 'hello' 
}

As you can see, we have two separate sub-states in the main state object: posts and filter. This is a good hint for making two reducers: a postsReducer to handle the posts sub-state, and a filterReducer...

By now, we might be wondering what exactly Redux is (besides a set of principles and some helper functions). Essentially, Redux brings actions and reducers together. It provides a store, which contains the application state and provides some functions to do the following:

• Access the application state: store.getState()
• Dispatch actions: store.dispatch(action)
• Register listeners: store.subscribe(listener)

According to the official documentation of Redux, Redux is a predictable state container for JavaScript apps.

The state container (store) is the heart of Redux: It contains your application state and does not allow external changes. Redux only allows changes through actions, which get passed to pure reducer functions. These restrictions that Redux enforces are what makes your application state predictable.

In this chapter, we first learned how to set up a project that is ready for Redux and the new JavaScript ES2015 syntax. Then, we implemented the basic elements of Redux and learned how ES2015 syntax makes implementing them easier. Finally, you also learned how to put a full Redux project together, as well as subscribe to state changes and dispatch actions.

In the next chapter, we will discuss how we can render user interfaces with React and use it together with Redux. Afterwards, we will build a full application with Redux and React.