Redux – (2) | Luhao’s blog

Designing App shape

Presentational vs. Container Components

	Presentational Components	Container Components
Purpose	How things look (markup, styles)	How things work (data fetching, state updates)
Aware of Redux	No	Yes
To read data	Read data from props	Subscribe to Redux state
To change data	Invoke callbacks from props	Dispatch Redux actions
Are written	By hand	Usually generated by React Redux

So in a nut shell, reusable components should be Presentational Components for displaying, and Container Components is responsible for data fetching and state management etc.

Async Actions

When you call an asynchronous API, there are two crucial moments in time: the moment you start the call, and the moment when you receive an answer (or a timeout).

Each of these two moments usually require a change in the application state; to do that, you need to dispatch normal actions that will be processed by reducers synchronously. Usually, for any API request you’ll want to dispatch at least three different kinds of actions:

An action informing the reducers that the request began.

The reducers may handle this action by toggling an isFetching flag in the state. This way the UI knows it’s time to show a spinner.

An action informing the reducers that the request finished successfully.

The reducers may handle this action by merging the new data into the state they manage and resetting isFetching. The UI would hide the spinner, and display the fetched data.

An action informing the reducers that the request failed.

The reducers may handle this action by resetting isFetching. Additionally, some reducers may want to store the error message so the UI can display it.

Async Flow

Without middleware, Redux store only supports synchronous data flow. This is what you get by default with createStore().

You may enhance createStore() with applyMiddleware(). It is not required, but it lets you express asynchronous actions in a convenient way.

Asynchronous middleware like redux-thunk or redux-promise wraps the store’s dispatch() method and allows you to dispatch something other than actions, for example, functions or Promises. Any middleware you use can then interpret anything you dispatch, and in turn, can pass actions to the next middleware in the chain. For example, a Promise middleware can intercept Promises and dispatch a pair of begin/end actions asynchronously in response to each Promise.

When the last middleware in the chain dispatches an action, it has to be a plain object. This is when the synchronous Redux data flow takes place.

Middlerware

If you’ve used server-side libraries like Express and Koa, you were also probably already familiar with the concept of middleware. In these frameworks, middleware is some code you can put between the framework receiving a request, and the framework generating a response. For example, Express or Koa middleware may add CORS headers, logging, compression, and more. The best feature of middleware is that it’s composable in a chain. You can use multiple independent third-party middleware in a single project.

Redux middleware solves different problems than Express or Koa middleware, but in a conceptually similar way.

It provides a third-party extension point between dispatching an action, and the moment it reaches the reducer.

People use Redux middleware for logging, crash reporting, talking to an asynchronous API, routing, and more.

Computing Derived Data

Reselect is a simple library for creating memoized, composable selector functions. Reselect selectors can be used to efficiently compute derived data from the Redux store.

…

Undo/Redo History

Algorithm like:

{
  past: Array<T>,
  present: T,
  future: Array<T>
}

Let’s talk through the algorithm to manipulate the state shape described above. We can define two actions to operate on this state: UNDO and REDO. In our reducer, we will do the following steps to handle these actions:

Handling Undo:

Remove the last element from the past.
Set the present to the element we removed in the previous step.
Insert the old present state at the beginning of the future.

Handling Redo

Remove the first element from the future.
Set the present to the element we removed in the previous step.
Insert the old present state at the end of the past.

Handling Other Actions

Insert the present at the end of the past.
Set the present to the new state after handling the action.
Clear the future.

redux: a predictable state container for JavaScript apps.

react-redux: Official React bindings for Redux.

redux-thunk: Thunk middleware for Redux.

A thunk is a function that returns a function which wraps an expression to delay its evaluation.

Immutable.js: provides many Persistent Immutable data structures

Reselect： a simple library for creating memoized, composable selector functions. Reselect selectors can be used to efficiently compute derived data from the Redux store.

Redux – (2)