Search code examples
reactjsdevtoolsreact-state-managementreact-easy-state

Devtools for React Easy State?


i just switcher from redux, is there any tooling available, to inspect or even manipulate the react Easy State stores for dev purpose or do you have any good practice Tipps to do so? Is ist maybe possible to console.log the current State on every change?


Solution

  • We don't have a devtool yet but it is an often requested feature. It's on our agenda and we are already collecting data about what people expect from a devtool. Sooo... what are the must-have features in a React state devtool to you?

    About the timeline: we will release better docs, a linter, and probably strict-mode before a devtool. We already have a very basic devtool primitive (which just logs a lot of data) that could be used in the meantime. It would never be an official API though and we would just remove it in a later release. Are you interested? Should we release it as a temporary solution?

    Is ist maybe possible to console.log the current State on every change?

    Sure:

    import { store, autoEffect } from '@risingstack/react-easy-state'
    
    const myStore = store({
      name: 'Bob'
    })
    
    autoEffect(() => console.log(JSON.stringify(myStore, null, 2)))
    
    // logs `{ name: 'Ann' }`
    myStore.name = 'Ann'
    

    (I am an author of React Easy State)