Abinav Seelan
UI Engineer @Flipkart β’ Ex @hashnode & @SaltsideTech β’ Javascript Junkie & Pokemon League Champion from India. https://abinavseelan.com π
@abinavseelan
@abinavseelan
@abinavseelan
Web Engineer
blog.campvanilla.com
ππ€
Redux is a
state management library
Single Source of truth
State is read-only
Modifications to the state occur through pure functions
Actions
View
Dispatch
State
Store
Reducers
Let's build a quick store. π¨βπ»π©βπ»
https://goo.gl/vGFvAM
Where does middleware fit in? π€
Actions
View
Dispatch
State
Store
Reducers
MiddlewareΒ π¨βπ»π©βπ»
// Middleware format
function(store) {
return function(next) {
return function(action) {
// middleware logic
}
}
}
// Middleware format
const awesomeMiddleware = (store) => (next) => (action) {
// Do something with `store` and `action`
// Call next(action) once you're done!
next(action);
}
This looks familiar! π€―
// It's similar to express.js middleware!
app.use((request, response, next) => {
// do something with request and response
// call next once you're done.
next(request, response);
});
Why is there so much currying?π€
A pretty detailed explanation https://goo.gl/MZ4KsF
tl;dr
Allows applyMiddleware() to independently pass the store and then compose the list of middleware
Source Code: https://goo.gl/6FoZEX
Let's build a middleware!Β π¨βπ»π©βπ»
Analytics
Loading animation
Stop action before it reaches the reducer
Syncing state with localstorage or the serverΒ
@abinavseelan
@abinavseelan
blog.campvanilla.com
By Abinav Seelan
Slides for the session on building your own redux middleware held at ReactJS Bangalore. https://www.meetup.com/ReactJS-Bangalore/events/244815606/
UI Engineer @Flipkart β’ Ex @hashnode & @SaltsideTech β’ Javascript Junkie & Pokemon League Champion from India. https://abinavseelan.com π