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
Writing Better Go: Lessons from 10 Code Reviews
konradreiche
0
470
チームの境界をブチ抜いていけ
tokai235
0
160
Server Side Kotlin Meetup vol.16: 内部動作を理解して ハイパフォーマンスなサーバサイド Kotlin アプリケーションを書こう
ternbusty
2
180
Le côté obscur des IA génératives
pascallemerrer
0
140
CSC509 Lecture 04
javiergs
PRO
0
300
複雑化したリポジトリをなんとかした話 pipenvからuvによるモノレポ構成への移行
satoshi256kbyte
1
1k
株式会社 Sun terras カンパニーデック
sunterras
0
280
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.6k
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
510
[Kaigi on Rais 2025] 全問正解率3%: RubyKaigiで出題したやりがちな危険コード5選
power3812
0
110
『毎日の移動』を支えるGoバックエンド内製開発
yutautsugi
2
230
Conquering Massive Traffic Spikes in Ruby Applications with Pitchfork
riseshia
0
160
Featured
See All Featured
Into the Great Unknown - MozCon
thekraken
40
2.1k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
How STYLIGHT went responsive
nonsquared
100
5.8k
Building Adaptive Systems
keathley
43
2.8k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
How to Think Like a Performance Engineer
csswizardry
27
2k
Embracing the Ebb and Flow
colly
88
4.8k
Agile that works and the tools we love
rasmusluckow
331
21k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
A better future with KSS
kneath
239
18k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
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