Forem: hitochan

React state management library for simple apps

hitochan — Sun, 14 Jul 2019 00:14:37 +0000

I am currently working on a simple web application with Next.js.
Though it is simple, there are some states that I wanted to use globally.
Currently there are several approaches to manage global state.

Redux or Mobx
Pass state and setState from useState to child components using React Context
Use react-first global state management libraries (e.g., reactn)

When it comes to global state management in React, Redux is one of the most widely used library. However it is too much for my simple use case because you have to define action creators with action type and payload.

Using React Context or global state management libraries seems much simpler. But one thing that I feel clumsy about these methods is you pass a (part of) state object to setState or whatever state setter function you use. This means that a caller must know the internal structure of state object. Typically these functions are called inside components. But I don't think components should be aware of the internal.
Wouldn't it be nice if a component can call a method with some parameters to update a global state not knowing the detail?
In a micro-framework called hyperapp, you can update a state with actions.
An action takes the form of

const someAction = (prevState, arg1, ..., argN) => {/* return newState */}

To the best of my knowledge, however, I could not find any library that does something like hyperapp. So I created react-state-action-hooks (I know... the name is a bit lengthy...)

Quick Introduction

First, define an initial state and action definitions.
Each key in action definitions maps to an action definition.
Action definition is a function that is somewhat similar to hyperapp action, except that it is a function that returns another function.
The parameters of the outer function are the ones of an action that is generated from the corresponding action definition.
The parameters of returned function are previous state and actions.
As shown in the example below you can either return a new state from previous state or call other actions.

const initialState = {
  count: 0,
};

const actionDefs = {
  incrementBy: (delta) => (state) => ({
    ...state,
    count: state.count + delta,
  }),
  decrementBy: (delta) => (state, actions) => {
    actions.incrementBy(-1);
  },
};

Having prepared initial state and action definitions, you can pass these to useActionState to get state and actions!
All the action definition turn into actions, and each of them is a function (not a function that returns a function). And you can call an action with the parameters of the outer function in an action definition.
This way, you don't have to be aware of the internal structure of the state.

const Counter = () => {
  const { state, actions } = useActionState(
    initialState,
    actionDefs
  );
  return (
   <div>
      <span>{state.count}</span>
      <button onClick={() => {actions.incrementBy(1);}}>
        +1
      </button>
      <button onClick={() => {actions.decrementBy(1);}}>
        -1
      </button>
    </div>
  );
};

In the example above, the hook is called in a component but you can use React hook to make it global! Moreover, it fully supports typescript!

For more information, take a look at the documentation.
Pull requests are very welcome!

What's the best way to modify code with GitHub Actions?

hitochan — Tue, 19 Feb 2019 15:43:27 +0000

I am trying out GitHub actions lately and wanted to know the best way to modify code wit GitHub Actions.

My github repository is integrated with CircleCI that checks if my code is well formatted using prettier. I also added renovate bot to automatically make PRs that update package dependencies.
The problem is the code renovate bot generates is not formatted, which makes CI fail. My solution is to trigger GitHub actions to run prettier whenever there is a push to the repository, then call GitHub API to push a commit that formats the code. What's your opinion?

Javascript object literal syntax I had never seen

hitochan — Wed, 07 Nov 2018 15:20:24 +0000

I encountered the following code when I was working through meteor tutorial.

{
  'submit .new-task'(event) {
    // some code here
  },
}

I was very confused because I had never seen an object literal that contains some string followed by an anonymous function. After I read the MDN web docs about object initializer, I know that the code above is equivalent to the following:

{
  'submit .new-task': function(event) {
    // some code here
  },
}

The syntax looks very odd to me maybe because I am simply not got used to it.

Does pair programming decrease individual's sense of responsibility or motivation?

hitochan — Tue, 09 Oct 2018 10:15:33 +0000

Do you think pair programming decreases individual's sense of responsibility or motivation?
One purpose of pair programming is to minimize the damage of losing someone who is the only one with some specific knowledge by sharing knowledge in the team.
If you see it the other way, however, it does not matter even if a member leaves the team and she might feel as if she had not played important role.
I think there are certain number of people who want to feel that they are indispensable to the team.

Now.sh docker image size limitation

hitochan — Sat, 04 Aug 2018 10:51:27 +0000

Does anyone know if now.sh limits the size of docker images?
I failed to deploy images probably because of the imitation as can be seen in the log below.

Till several days ago, I had been able to deploy images which should be almost as big as the ones I failed to deploy today.

Update: 7 Aug 2018
I asked about this problem in now.sh slack channel, and they suggested that I try MSB (Multi-staged build). MSB basically allows you to copy a built app from a stage to another so that the latter stage only contains the app but no libraries or packages necessary for building it.

Cannot call pointer method on Literal

hitochan — Sat, 12 May 2018 11:09:00 +0000

I tried to call pointer method on struct literal.

package main

import "fmt"

type Greeter struct {
        name string
}

func (h *Greeter) hello() {
        fmt.Printf("hello %s!\n", h.name)
}

func main() {
        (Greeter{"hitoshi"}).hello()
}

But it fails with the following message.

./hoge.go:14:22: cannot call pointer method on Greeter literal
./hoge.go:14:22: cannot take the address of Greeter literal

Applying & operator makes it work.
According to stackoverflow post, this is because a literal does not have an address.

My question is when we apply & operator on a literal, is a instance of the literal created on memory, and is thus allocated an address?

Is javascript or typescript the best for backend development?

hitochan — Sun, 18 Feb 2018 09:24:29 +0000

If you use javascirpt (or typescript) for backend server development, you can basically write web apps only with it.
From this, do you agree that javascript or typescript is the best language for backend development?

Why do you agree/disagree?
In what cases, are they suitable for backend server?