Jumpsuit & Jumpstate level up with new thunk-saga-killing features and global actions.
A few months ago we released Jumpsuit, an awesome framework for creating React apps big and small. It got a lot of traction right out of the gate, most likely for its low barrier to entry, no-boilerplate mentality and fresh take on Redux. If you were intrigued by the beta, you’re going to absolutely love what we’ve put together for version 1.0.0
Jumpsuit 1.0 takes state management very seriously.
The underlying state utility that Jumpsuit uses is suitably called Jumpstate, and it’s been our way of taking Redux to the next level and the next user. The “next user” we are referring to is you. Whether you are the hardened React/Redux veteran, or the noob that don’t even know what redux is, Jumpstate is how we give redux power to everyone while making it so much more fun to use. With our initial release, we targeting beginners who are looking for a simple way to get started with react, and 1.0 is still taking that mantra to new levels. But this release is more than that. It is an answer to so many requests and wishes from developers who have existing apps, who already use redux, or are looking for a stable enterprise react experience.
And here’s how we are doing it.
Global actions (aka traditional redux)
We know this is a no brainer and is actually the way traditional redux was designed, so we brought things up to speed. In 1.0, actions will be heard by all state reducers, and those reducers can decide how to handle said actions. Already using pre-1.0 Jumpsuit? Have no fear! Jumpstate still supports what we are calling “sandboxed” states. You probably know them by this signature:
State('mySandboxedState', { initial: {}, actions: {...} })These are still considered namespaced reducers that are not subscribed to global actions. Call their actions as you normally would. eg.CounterState.increment() Even better, there’s no refactoring involved to update to 1.0 :) Yay!
Forget about actions, action creators, reducers, thunks, and sagas.
If you have every seen a reddit thread like this, or wondered “What the thunk is a saga?”, then you’ll be happy to know that it doesn’t matter in Jumpsuit. In Jumpsuit:
- You don’t build reducers, you define
StatesandActions. Oh, and it takes about 70% less code. - You don’t need action creators. In fact, you don’t even need the dispatcher. We handle all of that for you.
- Asynchronous actions aren’t some crazy over-engineered concept. They are actions that can use asynchronous code. It’s simple (we’ll show you in a sec)
- Side-effects are easy. You don’t need generators or some massive convoluted api to handle side effects. “Keep it simple”, they say, so we did.
- You can hook into anything, even actions that you didn’t call, or any level of state condition you can dream up. Detect, then run; once again, a very simple concept.
Let’s build a counter shall we?
First we’ll put together the state.
Now we’ll create an async increment action:
Let’s hook into the state and do something different:
Pretty easy stuff. Okay, let’s wire it together with a component and render it!
This is now a fully-loaded Jumpsuit app. You’ve got everything you need here to start making something great!
To Enterprise and beyond
Jumpsuit and jumpstate have changed the way I develop, and there already a few large-scale enterprise apps using it in production today. One in particular that I have built is called Nozzle.io. Because of Jumpsuit, we were able to not only migrate from Angular.js to React, but build something that helped our React stack become more stable, easier to teach and maintain, and much more powerful that we were able to imagine.
Try it out for yourself!
- Jumpsuit on Github — A powerful & efficient React framework. Jump in. Zip up. Build great apps
- Jumpstate on Github — Simple and powerful state management for Redux
Tanner Linsley is the VP of User Experience at Nozzle.io and loves everything Javascript. He has helped create libraries and frameworks such as Chart.js, Jumpsuit, React-Table, and more.
