Supplyfx Chat

What’s React

State

Properties

JSX virtual DOM

+Render

diff

DOM

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

class Timer extends React.Component {

Flux

Redux is "Flux-like"

Single Source of Truth

State is Read-Only

Changes are made with Pure Functions

Redux

Data Flow

WebAPI Socket

AJAX Request Socket Client Actions Reducer

StoreView

State + Components

Chat Components

Sidebarconversations = [ { name: ‘FE’, description: ‘every day ….’, imageUrl: ‘…’, lastMessageAt: 123456, lastMessageSummary: ‘…’ }, {…}, …

]

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

Conversation

User

State

popovers

messages

users rooms

read states

participants

requests

conversations requests

dialog

image viewer

composer

header

sidebar preferences

connection

router

app

Reducers

Init

socket.io Server

socket.io client

init action

users

rooms

conversations

…

reducers

new message

socket.io Server

socket.io client

new-msg action

messages

read states

conversations

reducers

load messages

socket.io Server

socket.io client

msgs loaded

messages

conversations

reducers

socket.io client

Selectors

Sidebar

users

rooms

read states

conversations

sidebar

router

filter

sort

combine

conversations

Conversation

users

rooms

conversationsfind by router

combine

conversation

router

participants

requests

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.

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.

Q & A

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