This document discusses the architecture of a chat application built with React and Redux. It describes the main components used, including Sidebar, Conversation, and User components. It explains how state is handled through Redux, with actions dispatched from events like new messages and loading messages from the server. Selectors are used to retrieve relevant state for components. The data flow involves a socket server and client to handle real-time updates from the server.

1. Supplyfx Chat

2. What’s React
State
Properties
JSX
virtual
DOM
+
Render
diff
DOM

3. https://facebook.github.io/react/

5. Flux

6. Redux is "Flux-
like"
Single Source of Truth
State is Read-Only
Changes are made with Pure
Functions

7. Redux

8. Data Flow
WebAPI
Socket
AJAX Request
Socket Client
Actions Reducer
StoreView

10. State + Components

11. Chat Components

14. Sidebar
conversations = [
{
name: ‘FE’,
description: ‘every day ….’,
imageUrl: ‘…’,
lastMessageAt: 123456,
lastMessageSummary: ‘…’
},
{…},
…
]

15. Sidebar with filter
conversations =
conversations.filter(c =>
c.name.indexOf(keyword) !== -1);

16. Conversation

17. User

18. State

19. popovers
messages
users rooms
read states
participants
requests
conversations requests
dialog
image viewer
composer
header
sidebar preferences
connection
router
app

20. Reducers

21. Init
socket.io
Server
socket.io
client
init
action
users
rooms
conversa
tions
…
reducers

22. new message
socket.io
Server
socket.io
client
new-msg
action
messages
read
states
conversa
tions
reducers

23. load messages
socket.io
Server
socket.io
client
msgs
loaded
messages
conversa
tions
reducers
socket.io
client

24. Selectors

25. Sidebar
users
rooms
read states
conversations
sidebar
router
filter
sort
combine
conversations

26. Conversation
users
rooms
conversations
find by router
combine
conversation
router
participants
requests

27. Supplyfx Chat
actions: are payloads of information
that send data to the store.
components: React components that
are driven solely by props and don't
talk to Redux.
constants: Like actionTypes, storage
keys
containers: React components that
are aware of Redux, Router, etc.

28. Supplyfx Chat
lib: utility code, helpers
records: Immutable Records, like
Models
reducers: Redux reducers, response for
the actions, splitting the state to slices.
selectors: memorized, composable
selector functions
store: create store for redux
application.

29. Q & A

30. References
https://facebook.github.io/react/
http://redux.js.org/
https://facebook.github.io/immutable-js/
https://css-tricks.com/learning-react-redux/
https://code-cartoons.com/a-cartoon-intro-
to-redux-3afb775501a6#.cmkxw64bq