Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
The Redux The State Management
Search
Sastra Nababan
June 22, 2017
Programming
2
96
The Redux The State Management
Sastra Nababan
June 22, 2017
Tweet
Share
More Decks by Sastra Nababan
See All by Sastra Nababan
Developer Circles Overview
sastranababan
0
87
Getting Started with ReactJs & Ecosystem
sastranababan
1
220
Javascript Ecosystem Overview
sastranababan
0
81
Functional Programming Javascript
sastranababan
2
370
SADIA
sastranababan
0
130
Other Decks in Programming
See All in Programming
CSC509 Lecture 07
javiergs
PRO
0
240
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
420
CSC509 Lecture 06
javiergs
PRO
0
260
TransformerからMCPまで(現代AIを理解するための羅針盤)
mickey_kubo
6
3.8k
スキーマ駆動で、Zod OpenAPI Honoによる、API開発するために、Hono Takibiというライブラリを作っている
nakita628
0
310
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
280
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
240
Reactive Thinking with Signals and the Resource API
manfredsteyer
PRO
0
110
Google Opalで使える37のライブラリ
mickey_kubo
3
130
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
320
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
360
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
420
Featured
See All Featured
Producing Creativity
orderedlist
PRO
347
40k
The Cult of Friendly URLs
andyhume
79
6.6k
YesSQL, Process and Tooling at Scale
rocio
173
15k
Designing for Performance
lara
610
69k
Docker and Python
trallard
46
3.6k
How STYLIGHT went responsive
nonsquared
100
5.8k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Being A Developer After 40
akosma
91
590k
A better future with KSS
kneath
239
18k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
RailsConf 2023
tenderlove
30
1.3k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Transcript
Redux The State Management Sastra Nababan By
What is Redux ? Predictable state container for Javascript Apps
✓ State Management ✓ State Container ✓ Data Binding Also known as frontend javascript library for :
What is State Anyway ? Hey…. You keep talking about
state
State is….. Memory/Space to hold your app information ✓ Data
✓ Communication ✓ Action ✓ Session ✓ Location
Server Client Send Request Process & Rendering 1 3 2
Server Send Rendered Page Client Most of your app state stay here Server Side Rendering
Server Client Send Request Process & Rendering 1 3 2
Server Send Data Client Most of your app state stay here Client Side Rendering Now your state lives here too 4 Client Rendering
Things become complex & crazy App Growth
Can Redux Help ? Yes, Let Redux do that things
for you
Why Redux so popular in react world ? React Redux
+
React app made by component hierarchy
Component Communication The Challange is…..
Component Communication Scenario Parent to Child Child to Parent
Component Communication Scenario Sibling to Sibling Any to Any
Can you image this ?
Ok now let’s talk about Redux
How to learn Redux ? ✓ Understand the big picture
✓ Get familiar with basic functional programming ‣ Pure Function ‣ Filter ‣ Map ‣ Reduce ‣ Compose ‣ Immutability
When to use Redux ? If you aren't sure if
you need it, you don't need it. - Pete Hunt I would like to amend this: don't use Redux until you have problems with vanilla React. - Dan Abramov “ “ Today. - Sastra Nababan “
Redux Principle 1 of 3 Single source of truth It’s
called store. Whole application state stored here
Server Client Client Side Rendering with Redux
React Component Communication with Redux
React app made by component hierarchy
Redux Principle 2 of 3 State is read only The
only way to change the state is to emit an action
Redux Principle 3 of 3 Changes are made with pure
functions The only way to change the state is to emit an action
Redux Architecture Components in app Actions Store Reducer store.dispatch(action)
Store is… Plain object of app state
Action
Reducer
Advanced Topic
Middleware The moment point between dispatching an action & reducer
Components in app Actions Store Reducer store.dispatch(action) Middleware • logging • crash reporting • asynchronous API • routing • etc
Async ✓ redux-thunk ✓ redux-promises ✓ redux-sagas ( es6 generator
) How to manage async process ?
Redux Persist How to Store data locally ? ✓ HTML5
Local Storage ✓ redux-persist ✓ redux-storage
/,
Thanks Mauliate