3. Modeling Application State

Redux, challenging, rapidly evolving ecosystem. relies on packages on the side which changes quickly.

on top of redux, you have whole host of technologies...

need ES6 syntax.

What is redux?

What is it different from backbone, angular?

Redux: predictable state container for JS applications.

Suppose we have an app that displays list of books on the left and details on the main (author, pages, genre).

Consider structure of app. Both on view layer, and on data layer.

Data layer (data contained in the appliation): List of books and currently selected book
View layer: List View, List item, Detail View.

We want to separate view from data. Both come together to make a working, usable app.

Data layer - Redux is the data contained in this application box
View - React - views contained in the application box.

Redux, a state container, a collection of all the data that describes the app. Not only list of books, but also meta level properties, like what is the currently selected book.

React represent views, which translate the app's data as something that can be displayed on the screen and user can interact with.

What's different? Difference is that we centralize all the application data in a single object. Other js libraries always have collection of data. Backbone has collections, flux has different stores...angular..
redux centralize all these data in a central single object which we refer to as the state. Application level state. Global, big object which contain all data of our application.

Example, a counter. Add one button. Remove one button. Label count.

Data contained in app: current count
Views contained in app: current count, plus and minus button.

React in charge of showing the buttons components. Redux keep tracks of current count.