Redux Zero - Single Store, No Reducers - Interview with Matheus Lima

Although using Redux is straight-forward once you understand the approach and its nuances, after a while it gets repetitive. It's easy to end up with a lot of "boilerplate" code that wires all the logic together. For this reason, multiple solutions addressing the issue have appeared.

In this interview, we'll learn about Redux Zero by Matheus Lima.

See also the Kea interview for another approach and the original Redux interview to learn more about the approach from its creator.

Can you tell a bit about yourself?#

I am Matheus Lima, a JavaScript lead developer at Concrete Solutions.

How would you describe Redux Zero to someone who has never heard of it?#

Redux Zero is a library which offers a simple way to handle state in modern applications. It's lightweight, easy to learn and already works with React, React Native, Preact and Svelte. We have plans to add Angular and Vue.js bindings as well.

How does Redux Zero work?#

It's simple.

First, create a store. The application state will live here:

import { createStore } from "redux-zero";

const initialState = { count: 1 };
const store = createStore(initialState);

export default store;

Then, create some actions to change the state of your store:

const actions = (store) => ({
  increment: (state) => ({ count: state.count + 1 }),
  decrement: (state) => ({ count: state.count - 1 }),
});

Since the actions are bound to the store, they are just pure functions.

Now create your component. With Redux Zero your component can focus 100% on the UI and just call the actions to update the state:

import React from "react";
import { connect } from "redux-zero/react";

import actions from "./actions";

const mapToProps = ({ count }) => ({ count });

export default connect(
  mapToProps,
  actions
)(({ count, increment, decrement }) => (
  <div>
    <h1>{count}</h1>
    <div>
      <button onClick={decrement}>decrement</button>
      <button onClick={increment}>increment</button>
    </div>
  </div>
));

Last but not least, plug the whole thing in your index file:

import React from "react";
import { render } from "react-dom";
import { Provider } from "redux-zero/react";

import store from "./store";

import Counter from "./Counter";

const App = () => (
  <Provider store={store}>
    <Counter />
  </Provider>
);

render(<App />, document.getElementById("root"));

How does Redux Zero differ from other solutions?#

Redux is great, but in some cases, it's way too much. Maybe you don’t want to add all of that boilerplate to your project. Or perhaps the learning curve is too steep, and you just want something simpler to work with.

Redux Zero, on the other hand, is very simple. You don't have to learn about dispatchers and reducers (that's why the name is Redux Zero - because there are zero reducers).

With Redux Zero you just have a store and some actions.

Why did you develop Redux Zero?#

One of our developers here at Concrete, Miguel Albernaz, was using this gist as a state management solution instead of Redux. The project was going so well that I decided to extract the code, modify it a little bit and open source it to give back to the community.

What I did not expect was this huge success in less than a month.

What next?#

Right now we have three things in mind:

• Improve the documentation
• Add a middleware
• Add Angular and Vue.js bindings (we need your help).

What does the future look like for Redux Zero and web development in general? Can you see any particular trends?#

This is a really hard question. Everything is moving so fast in web development that's hard to make predictions. That said, I think that web components and state management tools are here to stay.

What advice would you give to programmers getting into web development?#

Study the basics. React, and Angular are probably going to die, but JavaScript and CSS won't.

Who should I interview next?#

Jason Miller.

Any last remarks?#

Try to be kind to open source maintainers. Most of them are not getting paid to develop the tools that you're using for free.

Conclusion#

Thanks for the interview Matheus! Redux Zero is one of the lightest state management solutions I've seen so far.

Check out Redux Zero in GitHub or learn more in an introduction to Redux Zero.