Easy and Simple State Management for React at 0.8kb

x-plus is a tiny and no nonsense state management library for react. It's alternative to redux, mobx, zustand, etc. It's easier and simpler to use as it's syntax is closer to useState hook.

Create a store

import { x } from "x-plus";

const store = x({ count: 0 }); // store is created

Access the store in react component

const [count, setCount] = useX(store); // similar to useState

<div onClick={() => setCount(count + 1)}>{count}</div>; // use in html

stackblitz Counter example

Stackblitz Todo Example

Counter React App Example

import { x, useX } from "x-plus";

// store
const countX = x({ count: 0 }));

function App() {
  const [count, setCount] = useX(countX);
  const incr = () => setCount({count: count + 1});
  return (
    <>
      <h1 onClick={incr}>{count}</h1> <br />
    </>
  );
}

export default App;

exploring the api

const countX = x({ address: { street: "123 Main St" } });

countX.getState(); // returns the current state of the store
countX.setState({ address: { street: "street updated" } }); // sets the new state for the store

countX.update((state) => (state.address.street = "new street")); // updates the state directly, you need to install immer-lite separately.

countX.reset(); // resets the state to intial state.
countX.getState(); // {address: {street: "123 Main St"}}

const street = countX.memo((state) => state.address.street); // returns the memoized value of the state

street.value; // "123 Main St"

const effect = countX.effect(
  () => {
    console.log("street is changed");
  },
  (state) => [state.address.street]
  // if you don't pass depsFn as second argument, it'll run whenever the Store is changed.
  // if you pass ()=>[], then it'll run only once.
); // it'll run the function passed as first argument whenever the deps change.
effect.unsub(); // you can unsubscribe from effect. itll stop logging "street is changed" whenever the street is changed.

subscribe: get notified when state is changed

const unsub = countX.subscribe((state) => {
  console.log(state);
});
unsub(); // you can unsubscribe from state changes.

storeFn (3 in 1)

store is a function when called with no arguments, it works like getState function and returns the state. when passed a new state as an argument, it'll work like a setState function. and when passed a function, it'll function similar to update function.

const store = x({ count: 0 });

//  similar to store.getState()
store(); // { count: 0 }

// similar to store.setState({ count: 1 })
store({ count: 1 }); // { count: 1 }

// similar to store.update((state) => state.count++)
store((state) => state.count++); // { count: 1 }

update with immer-lite

using immer-lite you can also update the state directly using update function. you can see in this example that we are not returning new state but updating the state directly. for this you need to install immer-lite as a dependency.

npm install immer-lite

countX.update((state) => {
  state.count++;
});

API

Store

• getState(); returns the current state of the store
• setState(newState); sets new state for the store
• setState((state)=>state); sets the new state with function
• update(state=>void); you can mutate state directly here.
• reset(); resets the state to intial state.
• subscribe(fn); it calls the call back function whenever the state is changed so uou can keep track of state changes.
• effect(fn, depsFn?); it's like useEffect hook. if no depsFn is passed, it'll call the callback function whenever the state is changed. if depsFn is passed, it'll call the callback function only when the depsFn returns value is changed. if empty array is passed, it'll call the callback function only once.
• memo(fn, depsFn?); it's similar to effect except it can return any value which gets memoized.
• derive(fn, depsFn?); it's similar to memo.

useX

• useX(store); returns an array of four items: current state of the store, setState function, update function, reset function.
• useX(store, resetOnUnmount); returns the current state of the store and resets the state to intial state when the component is unmounted. very useful sometimes. Sometimes you want to reset the state when the user navigates to another page.

Contributing

Contributions are always welcome! If you find a bug or want to add a feature, please open an issue or submit a pull request.

License

This project is licensed under the MIT License. See the LICENSE file for details.

Author

This project is created by Sean Freeman.

Acknowledgements

This project is inspired by simplicy of zustand.