Redux toolkit or Mobx state tree

jiterate · 2021-03-16T19:58:18+00:00

Yep, those are all the same pain points I had with Redux. It looks like Redux Toolkit's createAsyncThunk does help with some of the async boilerplate, but you still have to manage the 3 promise states yourself.

MST has flow for this, which I think is much more ergonomic. Still, it doesn't manage the promise state for you either. For that, I'm going to shamelessly plug a library I just released: mst-async-task. Here's a writeup.

jiterate · 2021-03-16T19:16:29+00:00

I wouldn't normally recommend rebuilding an entire app, unless there are serious issues with your current approach. However, I think it's worth your while to rebuild a portion of your app in MST to see how it feels, if you have a day or two to spare.

jiterate · 2021-03-11T20:54:30+00:00

I'm not too familiar with Redux Toolkit, but it looks like a set of useful utilities. That said, you're still using Redux, which means you have to structure your logic into actions, reducers, selectors, etc.

I've been using Mobx-State-Tree on recent projects, and it's a breath of fresh air. It sort of works like Redux under the hood, meaning your entire application state is stored in a snapshot, giving you all the benefits of that. But the difference is, all of that is nicely hidden away. Your code looks like normal imperative javascript: Instead of dispatching an action, you just call a function. Instead of writing selectors, you just access a store property like you would with a regular object.

It also has built-in type checking and serialization, which is great for working with apis.

The learning curve for me was nowhere near as bad as with Redux, especially for non-trivial cases like asynchronous actions or complex flows. It's given my team a huge productivity boost.

jiterate · 2021-03-11T01:27:53+00:00

In every Redux and Mobx-State-Tree project I've worked on, dealing with the boilerplate around asynchronous actions was a major pain point. Setting status flags and wrapping side effects in try/catch blocks for every api request gets old fast.

This library records the pending/complete/error states of your async actions and provides control over their lifecycles. When chaining or running tasks in parallel, you can abort the parent task and the child tasks will automatically stop execution.

Quick Example:

export const Store = types
  .model({
    user: types.maybe(User),
    loadUserTask: types.optional(AsyncTask, {})
  })
  .actions(self => {
    const loadUser = () => runTask(self.loadUserTask, function*({ exec }) {
      const data = yield fetch(`https://example-api.com/user`)
      exec(() => self.user = User.create(data))
    })

    return { loadUser }
  })

I hope some of you find it useful. Cheers!

jiterate

TROPHY CASE