recoil-gear: The missing devtools for recoil.js

Ruslan Elishaev
By
Ruslan Elishaev
,
Cover Image for recoil-gear: The missing devtools for recoil.js

Recoil is a great alternative for state-management libraries such as redux, redux-toolkit, mobx, or any other tool. No doubt that redux is the king in that field, but at the same time many developers struggle with the complexity and boilerplate that comes with redux.

I'm not going to introduce Recoil in this article. The recoil docs are quite straightforward, so please, visit the docs:

https://recoiljs.org/docs/introduction/getting-started/

For complex implementation check this excellent article: https://jasonwatmore.com/post/2021/09/16/react-recoil-user-registration-and-login-example-tutorial

Recoil devtools

Recoil has functionality to allow you to observe and update state changes, but no built-in UI tool or browser extension. Recoil-gear is a simple debug component that connects Redux DevTools to Recoil.\ Redux DevTools is one of the main features that developers love working with Redux, so recoil-gear is combining two great tools.

Getting started with Recoil and recoil-gear

install with yarn:

 yarn add recoil recoil-gear

install with npm:

 npm install recoil recoil-gear

install Redux DevTools:

https://chrome.google.com/webstore/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=en

usage:

import * as React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { RecoilRoot } from 'recoil'
import { RecoilDevTools } from 'recoil-gear'


ReactDOM.render(
  <React.StrictMode>
    <RecoilRoot>
      <RecoilDevTools />
      <App />
    </RecoilRoot>
  </React.StrictMode>,
  document.getElementById('root')
)

Open up redux devtools and observe state changes in redux devtools

recoil-gear devtools

Resources

More Posts To Read



HomeAboutMy ProjectsFavorite Tools
© creotip.io