Downloaded 15 times
![Sidebar
conversations = [
{
name: ‘FE’,
description: ‘every day ….’,
imageUrl: ‘…’,
lastMessageAt: 123456,
lastMessageSummary: ‘…’
},
{…},
…
]](https://image.slidesharecdn.com/supplyfx-chat-160810062902/85/Using-React-Redux-to-build-a-chat-system-14-320.jpg)
Uploaded byJim Liu
Using React/Redux to build a chat system.
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.
Using React/Redux to build a chat system.
- 1.
- 2.
- 3.
- 5.
- 6. Redux is "Flux- like" SingleSource of Truth State is Read-Only Changes are made with Pure Functions
- 7.
- 8. Data Flow WebAPI Socket AJAX Request SocketClient Actions Reducer StoreView
- 10.
- 11.
- 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.
- 17.
- 18.
- 19. popovers messages users rooms read states participants requests conversationsrequests dialog image viewer composer header sidebar preferences connection router app
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27. Supplyfx Chat actions: arepayloads 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: utilitycode, 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.
- 30.