[RELEASE] Acey - an Innovative Global State Manager for React apps (no more redux)

Hey fellows,

Today I'm going to introduce you to a class-oriented state manager I've been developing in the past 6 months.

Acey is an innovative Global State Manager for React Apps. 💡

It allows you to encapsulate your states inside Model class. Then you can gather the methods you need to treat, access, format, and organize their state. 🍱

You can :

  • Update and access your Model’s state wherever you want in your App without any binding. 🔓

  • Connect conveniently any Model with any component, so they re-render when the Model’s state changes. 🔄 (See example below)

case.png

Project on GitHub:

case.png

It implements many useful built-in features to make your life easier, building, and maintaining your app architecture. 🛠️

Here is a couple :

  • Cookie/local store feature: Store your Model’s state in the cookies/local store to retrieve their previous state when your app reloads. 🗄️

  • No Provider. 🎈

  • Compatible with React, React-Native, and NextJS. ✅

case.png case.png case.png case.png


Counter App example in one file (ReactJS):

🌎 Live demo    -     📺 Watch me doing it on Youtube

import React from 'react';
import { Model, config, useAcey } from 'acey'

/* Set the Acey configuration done, once, at the entry point of the project. */
config.done()

/* STEP 1: Let's create a model to handle the counter state */
class CounterModel extends Model {

  constructor(initialState: any, options: any){
    super(initialState, options)
  }

  /*  STEP 2: Add a getter for the counter number */
  get = () => this.state.counter

  /* 
      STEP 3: Add incrementer/decrementer actions to update the counter's state
      _________________________________________________________________________

        setState:     works like setState in React Class Components, 
                      it updates the current state of the Model

        save:         dispatch the new state to the store and re-render 
                      all the components bound with the Model

        localStore:   Store the Model's state in the localStore. (OPTION)
                      i) The default Model state at the next app load is going 
                         to be the last state stored.
  */
  increment = () => this.setState({counter: this.get() + 1}).save().localStore()
  decrement = () => this.setState({counter: this.get() - 1}).save().localStore()
}

/* 
   STEP 4: Instance the Counter Model, and define it as `connected Model 
           with the Acey Store` 

   i) connected Model have the ability to re-render the components they are bound with
      when their state change.
*/
const Counter = new CounterModel({counter: 0}, {connected: true, key: 'counter'})

const App = () => {

  /* STEP 5: Bind the Counter Model with the App components. */
  useAcey([ Counter ])

  return (
    <div>
      <button onClick={Counter.decrement}>decrement</button>
      {Counter.get()}
      <button onClick={Counter.increment}>increment</button>
    </div>
  );
}

export default App;

Thank you guys for reading!

💭 If you have any question just let me know here in the comment, or open an issue in the Github repo.

🕴️If you are looking for a more advanced example I made this video yesterday (building a to-do list with Acey)

case.png case.png

Learn Something New Everyday,
Connect With The Best Developers!

Sign Up Now!

& 500k+ others use Hashnode actively.

No Comments Yet