Note: this post has nothing to do with React Hooks API.

In my previous post, I introduced a library called react-context-global-state. After a while, I have better knowlege of TypeScript (yes, I’m a beginner!), and come up with fairly good type definitions. I just released a new version.

https://www.npmjs.com/package/react-context-global-state

Example code in TypeScript

Let me breifly show how the code looks like in TypeScript.

In a file named state.ts, we define a global state and export function components. The State type is also exported.

The library

I’ve been developing a library to make use of React Hooks API. The library is for global state mangement with the aim to use it instead of Redux, especially for smaller applications. See the repository for more information and the source code.

https://github.com/dai-shi/react-hooks-global-state

Please also check out my previous posts [1] [2].

Support for Redux middleware

Originally, the library was extending useState for global state. Later, reducer is supported. Now, middleware support is added. The following is the code snippet from the working example to illustrate how it can be used.

Motivation

Everyone is excited about the new React Hooks API. So am I. Having been thinking how to manage global state, the Hooks API seems promising. By the way, I like Redux a lot, but I don’t like react-redux a.k.a connect very much. It is too complicated for beginners to use it properly. For example, reselect / memoization is a hard concept to explain. My recommendation is to structure a global state so that mapStateToProps only needs to select a part of the state without any logic. If you are really free to structure a global state, you can make it so that it selects direct properties of the state, which means “one-depth”.

React Hooks API is a new proposal for React v16.7. It enables writing all components as functions with full functionality. You can develop “custom hooks” to add a new functionality. Although it’s not released yet, I would like to introduce a new library to support global state. Note that it’s still an experiment.

The library

It’s called “react-hooks-global-state” and is available in npm. Please also checkout the GitHub repository.

https://github.com/dai-shi/react-hooks-global-state

Motivation

Have you heard of React Native, GraphQL and TypeScript? I’m looking for a easy and nice tech stack to develop mobile apps. These three may fit nicely for developing mobile apps for beginners up to intermediates. More precisely, Expo is chosen for building React Native development environment, and React Apollo is for GraphQL. These libraries comes with type annotations, which allow us to code in TypeScript. By “Clean” I mean not only the boilerplate is minimalistic, but also we don’t allow “any” types.

I had been trying to find a way to use React without using class. Redux is one solution to achieve this. Although I love the idea of writing everthing in pure functions, Redux is sometimes not suitable for small apps. React v16.3 introduced new Context API officially. Since then, several ideas were proposed to use it for managing global state. So far, I wasn’t able to find something I really liked, hence I made a new one.