Redux
What is Redux?
A state management library
Independent Library
- React
- Angular
- or any!
Why Redux?
Redux Principles
Whuut?
One single immutable state
//entire application state
{
isLoading: false,
toDos: [
{
title: 'Prepare Slide',
action: 'try to be funny',
comment: 'fail miserably'
},
{
title: 'Cant think of anything',
action: 'something something',
comment: 'something something'
}
]
}Actions
Only way to change the state is to dispatch action
store.dispatch({
type: 'ADD_TODO',
data: {
title: 'Hi',
action: 'Umm',
comment: 'Bye'
}
})Reducers
just a function that returns a new state
toDoReducer = (state = [], action) => {
switch(action.type) {
case ADD_TODO:
//returns newState;
default:
return state;
}
}toDoReducer = (state = [], action) => {
switch(action.type) {
case ADD_TODO:
return state.push(action.data);
default:
return state;
}
}
toDoReducer = (state = [], action) => {
switch(action.type) {
case ADD_TODO:
return [...state, Object.assign({}, action.data)];
default:
return state;
}
}Redux Flow
React : Someone just clicked the save button.
Action : I will tell the reducers.
Reducer : I will change the state.
Store : I'll notify all the components.
React : Updating the UI!
So what's the benefits
- Awesome State Management
- Awesome Debugging capability
- Happiness
Awesomeness
Demo
Redux
By Pratish Shrestha
