Hooks come in

React team released react v16.8.0 yesterday. It means React Hooks are available in a stable release! I think you must have searched some articles or libs that describe how to use the new feature to rebuild the state management.

What feature that we want from an awesome hooksful state-management library will be discussed in the following sections. These requirements will be satisfied in the end.

Update 2019–2–19: Test integration finished 🎉,~95% coverage.

Update 2019–3–25: Test coverage 100%, debugger devTools + Redux devTools support

Requirements

Make use of useState’s advantage

useState plays the role of setState in hooks’ world. Look at the following snippets.

Class

@connect(...)
class BasicClass…


Hooks is really an exciting feature in React 16.7. It move the concern of lifecycle away and let the logic in component much reusable.

Last week I make a simple state management lib to help me migrate to Hooks api and keep compatible with class component. I will share my steps to achieve it below.

🔗 demo link

Create a global Store

At first, we need to create a global store/object to store all the information of the model.

Global State initialization

Define the Model structure

Now we need to confirm the type of Model we write above. In my definition, each model has their own state and actions. …

ArrayZoneYour

Front-end engineer @Bytedance Inc., React and TypeScript fans.

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