React and Redux

React for view. Redux for State. Integration React with Redux 1. map Redux actions to React event handlers as React props. 2. map Redux state to React props for rendering only. 3. When a user interacts with React UI, the handlers can 'dispatch' actions to Redux. 4. The Redux Reducers will process the actions, 'updating' the state by copying and modify.

User interact with React UI, dispatching Redux actions, to Redux Reducers that responsible for state.

Redux Store provides state and handlers as props to React UI Components, via React Context Provider.

Async Actions

Redux middleware Redux-Thunk executes logic returned from special Redux Actions.

These Thunk Actions can trigger ajax call and return the Promise. These Thunk Actions can also emit Socket-IO messages. The Registered Socket-IO listeners can dispatch actions to Redux for state update.