React Express

2.1ES2015...
2.3JSX
6.2Redux...
6.3GraphQL...
Redux
Many medium and large React apps use Redux for managing data and state throughout the application. Redux is a fairly expansive topic, so we'll just cover basic usage with React here, leaving more advanced usage to the Redux docs.
Redux Architecture
store
An application will create a single Redux store to hold all data and state. We can view the state of the store by calling store.getState(). The store's state should never be modified directly; instead, we call store.dispatch(action) to dispatch actions into the store.
action
actions should be plain objects containing a type field, e.g. {type: 'INCREMENT'}. You can define any types you want. You may also include other fields in the action object. By convention, we often pass extra data in a payload field, e.g. {type: 'SET_VALUE', payload: 42}. Read more about action conventions here: Flux Standard Actions.
reducer
You then define a function to handle actions, and update the store accordingly. You can choose how to update the state depending on which type of action your reducer function receives. Redux will pass this function the current state of the store, and the action you dispatched, expecting an updated state object to be returned: (state, action) => newState. We call this function a reducer function.
That's it!
There are a lot of new terms, but it's actually not that complicated once you start using it. We'll look at two examples: an extremely minimal (contrived) example, and then the same To-Do list app from the Component State example.
Minimal Example
This example shows the bare minimum steps necessary to set up a redux store, define action types, and define a reducer function to handle them.
To-Do List Example
Let's take a look at our To-Do List app again, now that it's using Redux.
Files
  • index.js
    This file handles creating the redux store and passing it to our App container.
  • todoListRedux.js
    Defines the action types, the reducer function, and actionCreators helper functions to create actions. Note that we also moved initialState into this file (redux allows you to either pass it into your store on creation, or return it from your reducer).
  • App.js
    App is a "smart" container component. It is aware of our application's state and can fire actions to update the state, using the helper functions we defined in actionCreators. The container subscribes to the store, updating its own state and the props of its children whenever the store's state changes in response to an action.
  • List.js, Input.js, Title.js
    Presentational components - these are the same as in the Component State example.