@mattlanham @imjakechapman At Infinite Red, we used Redux for several years, and it worked fine. We used redux-saga for side effects and made a few helper libraries to make it better.
1/
1/
@mattlanham @imjakechapman It wasn't quite working for us, so we started looking for something new.
2/
https://twitter.com/jevakallio/status/962968823648391168
2/
@mattlanham @imjakechapman One of our devs found MobX and MobX-State-Tree. MobX was a little too free-form for us, but MST fit the bill -- it had little boilerplate and also came with MobX-React which gave superior performance on state changes.
3/
3/
@mattlanham @imjakechapman We tried it out on a couple projects and fell in love (this was about 2017). We've been using it on every project we can ever since, and as an agency we've had a chance to try it on a number of different types of startups and large scale apps.
4/
4/
@mattlanham @imjakechapman I'll list some advantages over Redux, but keep in mind that Redux Toolkit came out recently which addresses several of these complaints, so if the cost of change to MST is too daunting, check that out.
5/
5/
@mattlanham @imjakechapman Also, this is a topic with lots of feelings, so I'll caveat that this is just from our perspective, and YMMV. 😇
6/
https://twitter.com/thekitze/status/881185977728978944
6/
@mattlanham @imjakechapman 1. Learning curve.
Redux is based on flux, and that comes with a shift in mentality with a lot of semi unintuitive concepts. There are lots of unfamiliar terms thrown around: dispatcher, reducers, action creators, thunks, sagas, epics, middleware.
This is a bit challenging.
7/
Redux is based on flux, and that comes with a shift in mentality with a lot of semi unintuitive concepts. There are lots of unfamiliar terms thrown around: dispatcher, reducers, action creators, thunks, sagas, epics, middleware.
This is a bit challenging.
7/
@mattlanham @imjakechapman One of my devs, Mark Rickert, put it this way:
"What really tripped me up when I started with Redux was… 'What?! I can’t just change the data?!'"
8/
"What really tripped me up when I started with Redux was… 'What?! I can’t just change the data?!'"
8/
@mattlanham @imjakechapman MST, on the other hand, within some constraints you're mostly working with functions and property assignment.
9/
9/
@mattlanham @imjakechapman Example:
const User = types.model({
firstName: types.string
}).actions(user => ({
setFirstname(newName) {
user.firstName = newName
}
})
const myUser = User.create({ firstName: "Matt" })
myUser.setFirstName("Jamon")
9/
const User = types.model({
firstName: types.string
}).actions(user => ({
setFirstname(newName) {
user.firstName = newName
}
})
const myUser = User.create({ firstName: "Matt" })
myUser.setFirstName("Jamon")
9/
@mattlanham @imjakechapman You *do* have to use an "action" to change properties -- can't just do `myUser.firstName = "Jamon"`.
That's because within those actions, changes are "observed". And when an observer component uses myUser.firstName, it'll listen for changes, and re-render.
10/
That's because within those actions, changes are "observed". And when an observer component uses myUser.firstName, it'll listen for changes, and re-render.
10/
@mattlanham @imjakechapman 2. Boilerplate
What you saw above was essentially a full MST implementation. To add a property that can be changed, you can change one file. With Redux you're often changing multiple files.
As your project complexity grows, it just scales how you'd expect.
11/
What you saw above was essentially a full MST implementation. To add a property that can be changed, you can change one file. With Redux you're often changing multiple files.
As your project complexity grows, it just scales how you'd expect.
11/
@mattlanham @imjakechapman 3. Side effects
In Redux, there isn't an official way to handle side effects (in Redux-Toolkit there is, btw). So you end up using thunks or sagas and epics to manage it.
In MST, there are async actions built-in as well as an advanced type of async action called a "flow".
12/
In Redux, there isn't an official way to handle side effects (in Redux-Toolkit there is, btw). So you end up using thunks or sagas and epics to manage it.
In MST, there are async actions built-in as well as an advanced type of async action called a "flow".
12/
@mattlanham @imjakechapman Async actions are about as powerful as thunks, and flow is about as powerful as sagas.
...
.actions(user => ({
fetchGithub: flow(function* {
const data = yield api.fetchGithub(user.handle)
user.setGithub(data)
// more yields
})
})
13/
...
.actions(user => ({
fetchGithub: flow(function* {
const data = yield api.fetchGithub(user.handle)
user.setGithub(data)
// more yields
})
})
13/
@mattlanham @imjakechapman 4. Everyone does Redux differently
There's not really one way to do Redux, and everyone does it differently (sometimes very differently). Conversely, we haven't really fundamentally changed how we write MST in 4 years. I think this speaks to the benefits of MST by itself.
14/
There's not really one way to do Redux, and everyone does it differently (sometimes very differently). Conversely, we haven't really fundamentally changed how we write MST in 4 years. I think this speaks to the benefits of MST by itself.
14/
@mattlanham @imjakechapman 5. Performance
While it’s certainly possible to write performant Redux applications (we did for a couple of years), it’s not very hard to write sluggish ones.
15/
While it’s certainly possible to write performant Redux applications (we did for a couple of years), it’s not very hard to write sluggish ones.
15/
@mattlanham @imjakechapman React Redux is very well-written piece of software, but bloated middleware, unnecessary renders, un-memoized selectors, denormalized data structures, and more are all gotchas that can bite you. You can fix these with a bit of work, but you do have to be intentional about it.
16/
16/
@mattlanham @imjakechapman MST, for the most part, in combination with MobX-React (or MobX-React-Lite which we use because we don't need class component support), makes it pretty idiomatic to write performant apps.
17/
17/
@mattlanham @imjakechapman (Aside: we did run into a problem when having thousands of components on a web page recently. I didn't spend much time with the dev debugging it as he found a workaround, but the core team has it on our radar to figure out why. Shouldn't happen.)
18/
18/
@mattlanham @imjakechapman 6. Runtime type checking
In MST, your properties are defined as runtime types:
const User = types.model({
firstName: types.string,
age: types.number
})
If the wrong type is fed into the model, you'll get a runtime error.
19/
In MST, your properties are defined as runtime types:
const User = types.model({
firstName: types.string,
age: types.number
})
If the wrong type is fed into the model, you'll get a runtime error.
19/
@mattlanham @imjakechapman Not only that, but the TypeScript types are inferred from your runtime types, so you don't have to define the interface twice!
In this example, see how I never defined any TypeScript types? Yet TS can auto-complete the `country` property.
20/
In this example, see how I never defined any TypeScript types? Yet TS can auto-complete the `country` property.
20/
@mattlanham @imjakechapman With all of this said, there are tradeoffs. Redux has many times the community that MST does. It has many community libraries. Nearly all of the objections can be worked around or are addressed in Redux Toolkit. It's still the go-to state management library for many.
21/
21/
@mattlanham @imjakechapman Documentation improvements are ongoing. We have excellent support from @EmilTholin and others on our Spectrum chat (often same-day responses. I recruited an all-new core team that is meeting monthly to go over PRs and issues. Big plans are in the works, as time allows.
22/
22/
@mattlanham @imjakechapman @EmilTholin Wow this is long. I warned you! 😂
... if you'd like an expanded version, here's a blog post I wrote about it:
shift.infinite.red/why-infinite-r…
... if you'd like an expanded version, here's a blog post I wrote about it:
shift.infinite.red/why-infinite-r…
@mattlanham @imjakechapman @EmilTholin Great question @dev__adi.
For broader operations we often use a root store or substore action to coordinate across the tree.
A common example is `rootStore.reset()`. It then calls substores with `.reset()` which then manage their own resets.
For broader operations we often use a root store or substore action to coordinate across the tree.
A common example is `rootStore.reset()`. It then calls substores with `.reset()` which then manage their own resets.
https://twitter.com/dev__adi/status/1361755316367413248
@mattlanham @imjakechapman @EmilTholin @dev__adi You can trigger flows from your own actions if you prefer, or you can listen using `onPatch` or other helper hooks.
Simplified example in next tweet....
Simplified example in next tweet....
https://twitter.com/KSakarisson/status/1361777901390229506
@mattlanham @imjakechapman @EmilTholin @dev__adi // Example of triggering it manuallly
// ...
.actions(user => ({
async login(user, password) {
const token = await api.login(user.password)
user.setToken(token)
user.sendWelcomeEmail()
},
sendWelcomeEmail: flow(function* { ... })
})
// ...
.actions(user => ({
async login(user, password) {
const token = await api.login(user.password)
user.setToken(token)
user.sendWelcomeEmail()
},
sendWelcomeEmail: flow(function* { ... })
})
@mattlanham @imjakechapman @EmilTholin @dev__adi // Example of listening to patches
// ...
onPatch(user, ({ op, path, value }) => {
if (op === "replace" && path === "/token" && value.length >= 0) {
// logged in
user.sendWelcomeEmail()
}
})
(Sidenote: this is where pattern matching would be nice....)
// ...
onPatch(user, ({ op, path, value }) => {
if (op === "replace" && path === "/token" && value.length >= 0) {
// logged in
user.sendWelcomeEmail()
}
})
(Sidenote: this is where pattern matching would be nice....)
@mattlanham @imjakechapman @EmilTholin @dev__adi Here's an example from a real project -- we reach back to the rootStore from the loginStore in the `doLogout` action and reset everything. I like this imperative example best, because it's easy to figure out *why* the reset happened, rather than it being magic.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
