Getting started
with
Redux
Vince liu
faceach@gmail.com
One component
If the data is going to change in component, you should use state.
In general, you should initialize state in the constructor, and then call setState() when you want to change it.
setState()
A
Two components
Components could be created by customized data. These customized data are called props.
- Containing relation
- Sibling relation
{...props}
A
B
Two components
Components could be created by customized data. These customized data are called props.
- Containing relation
- Sibling relation
B
A
{...props}
setState()
{...props}
callback()
Three and more...
A
B
C
D
E
Three and more...
Pub/Sub
A
B
C
D
E
Event 1
Event 2
Event 3
Event 4
Event 5
React + Global state
A
C
B
D
Application state
{...props}
{...props}
{...props}
{...props}
Redux
Action creator
Store
View
Dispatch actions
Reducer
Provider + connect
listen to {state, actions}
and user behavior
Business logic goes here
Global app state
store.subscribe()
store.dispatch()
update state
Large Application
Store
Act
View
Store
Act
View
Store
Act
View
C
A
B
createStore(combineReducers()) => Store
Reducer C
Act
View
Reducer A
Act
View
Reducer B
Act
View
C
A
B
Redux
managing
the state
- createStore(reducer, [preloadedState], [enhancer])
- combineReducers(reducers)
- applyMiddleware(...middlewares)
- bindActionCreators(actionCreators, dispatch)
- compose(...functions)
Top-Level Exports
- getState()
- dispatch(action)
- subscribe(listener)
- replaceReducer(nextReducer)
Store API
is only concerned with
Thanks!
Q & A
Getting started with Redux
By Vince Liu
