DEV Community: greg lobinski

Use Unstated to manage the state of your GatsbyJS app

greg lobinski — Tue, 31 Jul 2018 09:19:23 +0000

First of all, you have to know that I am a big fan of GatsbyJS. I have been using it for a couple of months already. I have created some starters for it, some of them are quite recognized.

For those of you who does not know what GatsbyJS is yet, it is a static site generator for React.

If you already know what it is, you probably also know that the major upgrade is coming. The GatsbyJS version 2 is on the go.

Because of that, a couple days ago I decided to familiarize myself with the upcoming changes.

One thing came to light.

Layout component

In the version 1 there are Layout type components. If you have only one such a component in your application, then it works as a root component of the whole app, all pages are rendered as children of it.

The component is an ideal place to store a central state of the application.

Regretably with the new architecture of the version 2 it does not work. Now Layouts are ordinary components. In v2 they are placed inside Page components not outside them. You can't store the central app state there, because every time you switch to a new page the Layout component is mounted.

The problem is already noticed and I believe that soon there will be workaround for it.

State container

But till that I needed a new container for the state of my app. I could use react-redux, GatsbyJS works nicely with it. But I decided to look for something new.

After all, I was just playing with the new GatsbyJS, it was a good ocasion to explore the new land even further.

This way I came across Unstated.

Unstated

Unstated is a state container created by @jamiebuilds.

Ken Wheeler said about the library:

"When people say you don't need Redux most of the time, they actually mean you do need Unstated. It's like setState on fucking horse steroids"

GatsbyJS and Unstated together

Let's write some code.

Note. Whenever I use yarn, you can use npm with coresponding commands, if you prefer.

I assume that you already have a Gatsby CLI installed globaly, so you are able to create a GatsbyJS website with the gatsby new command. If not, read this first.

gatsby new gatsby-unstated-example https://github.com/gatsbyjs/gatsby-starter-default.git#v2

Notice the #v2 flag at the end of the repo url. It means we want to install the starter build on the v2 branch of the repo. And that means we will work with the GatsbyJS v2 which, you should remember that, is still in beta.

Move into the newly created folder.

cd gatsby-unstated-example

Install unstated.

yarn add unstated

Container

First we have to build a container for our state. Create a file CounterContainer.js inside the src/state/ folder. With code like below.

import { Container } from "unstated";

class CounterContainer extends Container {
  state = {
    count: 0
  };

  increment() {
    this.setState({ count: this.state.count + 1 });
  }

  decrement() {
    this.setState({ count: this.state.count - 1 });
  }
}

export default CounterContainer;

What is it similar to? It looks like a regular React class component, doesn't it? But it's not.

Behind the scenes our Containers are also event emitters that our app can subscribe to for updates. When you call setState it triggers components to re-render, be careful not to mutate this.state directly or your components won't re-render.

Provider

To use unstated's provider in a GatsbyJS site you need to hook into two Gatsby's extension points.

One is replaceRenderer which runs during Gatsby's server rendering process.

Edit gatsby-ssr.js.

import React from "react";
import { Provider } from "unstated";
import { renderToString } from "react-dom/server";

export const replaceRenderer = ({ bodyComponent, replaceBodyHTMLString }) => {
  const ConnectedBody = () => <Provider>{bodyComponent}</Provider>;
  replaceBodyHTMLString(renderToString(<ConnectedBody />));
};

The second one is replaceRouterComponent which is a part of Gatsby's browser APIs. Edit gatsby-browser.js.

import React from "react";
import { Router } from "react-router-dom";
import { Provider } from "unstated";

export const replaceRouterComponent = ({ history }) => {
  const ConnectedRouterWrapper = ({ children }) => (
    <Provider>
      <Router history={history}>{children}</Router>
    </Provider>
  );

  return ConnectedRouterWrapper;
};

The last step is to subscribe to the state.

Open src/components/layout.js file and add two import statements to it.

import { Subscribe } from "unstated";
import CounterContainer from "../state/CounterContainer";

And a little interface to manage and observe the current value of the state.

<Subscribe to={[CounterContainer]}>
  {counter => (
    <div>
      <button onClick={() => counter.decrement()}>-</button>
      <span> Count: {counter.state.count}</span>
      <button onClick={() => counter.increment()}>+</button>
    </div>
  )}
</Subscribe>

You should see something like this.

The value of Count: should stay unchanged when you switch between pages.

That's it. You have now a GatsbyJS app with a central state managed by Unstated.

Use styled-jsx in create-react-app without ejection

greg lobinski — Tue, 31 Jul 2018 09:06:53 +0000

I like styled-jsx. I build a GatsbyJS starter with it.

If you do not know, GatsbyJS is a static site generator for ReactJS.

I assume you know what styled-jsx is, otherwise you would not be interested in the title. Just in case, styled-jsx is a 'CSS in JS' library.

As I wrote, I got some experience with styled-jsx working with GatsbyJS, but a couple of days ago I wanted to use the library in an app based on create-react-app. I am pretty sure you know what create-react-app is. :)

There was one problem however.

To make styled-jsx work we have to edit the project's babel config. Nothing complicated, but create-react-app does not allow any changes like that, without ejecting. Ejecting however was not a thing I wanted.

I got stuck.

React App Rewired

Fortunately, react-app-rewired came to the rescue.

Tweak the create-react-app webpack config(s) without using 'eject' and without creating a fork of the react-scripts. All the benefits of create-react-app without the limitations of "no config". You can add plugins, loaders whatever you need.

So let's make styled-jsx work in an unejected create-react-app based application.

Rewire create-react-app to use styled-jsx

First, create an app with create-react-app.

npx create-react-app my-styled-jsx-app

Move to the newly created folder.

cd my-styled-jsx-app

Then install react-app-rewire as a dev dependency.

yarn add react-app-rewired --dev

And styled-jsx as a dependency.

yarn add styled-jsx

It's time to rewire create-react-app. Open the package.js file and edit from this...

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test --env=jsdom",
}

... to this.

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom"
}

Now we are able to edit the babel's config, as we want.

Create a new file called config-overrides.js in the root directory of the app.

const { injectBabelPlugin } = require("react-app-rewired");

module.exports = function override(config, env) {
  config = injectBabelPlugin(["styled-jsx/babel"], config);

  return config;
};

That's it. We have an app build on create-react-app in which we can use styled-jsx without ejecting.

Restyle the app with styled-jsx

Move CSS style rules from outer css files into the App component's file.

import React, { Component } from "react";
import logo from "./logo.svg";

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        {`/* global styles */`}
        <style jsx global>
          {`
            body {
              margin: 0;
              padding: 0;
              font-family: sans-serif;
            }
          `}
        </style>
        {`/* local styles */`}
        <style jsx>{`
          .App {
            text-align: center;
          }

          .App-logo {
            animation: App-logo-spin infinite 20s linear;
            height: 80px;
          }

          .App-header {
            background-color: #222;
            height: 150px;
            padding: 20px;
            color: white;
          }

          .App-title {
            font-size: 1.5em;
          }

          .App-intro {
            font-size: large;
          }

          @keyframes App-logo-spin {
            from {
              transform: rotate(0deg);
            }
            to {
              transform: rotate(360deg);
            }
          }
        `}</style>`
      </div>
    );
  }
}

export default App;

Clearing

The last thing to do is to make some clearing.

Remove needless CSS files.

remove src/index.css scr/App.css

And their import statements from App.js and index.js.

Demo

There is a repo on Github - example-create-react-app-styled-jsx - with a live demo.