credit: Jessie Wilcox Smith

The Children of Redux — Part 1: Plait, Dutier and dva

Yes, I know that we sleep with Redux and wake up with it again! After the growing popularity of React library, focusing on the state management in the client-side becomes inevitably needed and resolves many issues. But also people (like me) are arguing about the “rituals” while we are using Redux as updating 3 or 5 files in different directories and so on. There is also some directory structure approaches for tidying every part of your state management up like ducks. But anyway, maybe we need another alternative to have a look and widen our perspective into new horizons.

To note, (and spoiler alert!) nearly every Flux/Redux alternative has nearly the same features like having almost declared actions, reducers to evaluate those actions into an actual state.

This article series are all about the possible successors of Redux and will probably be finishing with a proposal for better Flux/Redux alternative library approach for you.

Plait

A fast, minimal JavaScript framework for building isomorphic reactive web components! Sounds cool but what about coding conventions?

The following lines is for starting development with Plait:

The architecture and usage look really like the Elm API, so you have only 3 parts of your small component: init, view and update.

“view” is just a container for representing HTML markup collection of the component. “dispatch” method is just for sending notifications to “update” method to convert them as immutable states generated by Redux API.

update function listens for the changes during the lifecycle of the component and dispatches the actions and returns a new state. To note, update function is just a Redux reducer.

init is the initial state initializer. You may use it as returning an array with state and action for remote async calls.

After everything seems OK for you, you can connect everything into an instance.

Then, choosing the correct DOM element to render will be the latest step for you:

Plait uses virtual-dom library for immutability plus purity and in the readme file of the repo says that it is faster than any other libraries/frameworks like Elm, and etc.

Dutier

“Dutier is a small (1kb), async and powerfull state management solution for Javascript applications.” Alright, let’s have a look!

The methods we need to use for implementing the library into our project consist of 3 parts: reducer for evaluating the state and it is just literally a reducer like in Redux, createStore for connecting an actual store from that reducer with an actual component with subscription and the generated instance after the createStore gets the reducer as an argument. But at the end of the day, you only need “createStore” method to be imported. One more thing, you need action methods to use during manipulating the initial/updated state.

We are structuring the initial state:

Then, adding our reducer method:

Now, we are connecting the reducer with our current state:

This is the time to create our action method:

Then, let’s add our React component to be an example for attaching state:

There is some tricky and a bit weird stuff here. The reason for putting the subscribe method into componentWillMount means the store change will be triggered just after the update props come.

Another cool feature is that returning only a promise when you call a dispatch event.

It is also possible to compose reducers into one reducer like combineReducers in Redux.

dva

“React and redux based, lightweight and elm-style framework. (Inspired by elm and choo)”. Cool, let see:

dva library looks like having a proper documentation for the developers who has just met with it and there says that there are 8 principles about the library: state (which is the state of the app), action (which is the first step for sending signals for updating the current state), dispatch function (which gets an action to update state as the second step), reducer (which gets state and action as arguments to handle/update state), effects (for async calls), subscriptions (which are for DOM events, etc.), router and router components.

If you are developing a simple application, you will need mostly the main api of dva with connect method and the Route and Router objects.

First, let’s have a look at the view context:

dva uses “model” keyword for your state:

As we declare our router, we are using Router as a wrapper for whole Route(s):

At the end, it is enough to give the entry point of your application and that’s it:

Hope you like the article! Thanks for reading and see you in the next series.

Note: If you like this post, please share it on Twitter, or do something! :)

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store