YASM - Your Awesome State Management

YASM is a state management library for React that aims to simplify state management in your applications, reducing boilerplate code and promoting a clean and efficient code style.

Table of Contents

• Yet Another State Management?
• Installation
• Concepts
  • State structure
  • Defining Actions
• Usage
  • Initializing YASM
  • Defining Actions
  • Reducers
  • Selectors
  • Dispatching Actions
• Examples
• Contributing
• License

Yet Another State Management?

Why YASM is different from other state managements?

• Re-usability: Define a reducer once and connect how many states you want.
• Component-based design: Define a Component and use it how many times you want.
• Custom Composition: consider you defined a checkbox reducer. you want to show an array of
• Speed: Unlike Redux, YASM only try to update the updated part of UI. Redux call subscription function of every component. after filtering unchanged states, the rest components will re-render. but YASM knows exactly which component has updated without checking!
• boilerplate bye-bye

Installation

You can install YASM via npm or yarn:

npm install @mrnafisia/yasm
# or
yarn add @mrnafisia/yasm

Concepts

State structure

Unlike Redux that store their states in nested-structure, YASM use flat-structure. It is main difference and source of the YASM features.

Usage

Defining Section

First, import YASM and initialize it in your application:

import { createStore } from 'yasm';

const store = createStore(initialState);

Defining Actions

Actions are used to modify the state. Define your actions like this:

const increment = (amount) => ({ type: 'INCREMENT', amount });
const decrement = (amount) => ({ type: 'DECREMENT', amount });

Reducers

Reducers specify how the state should change in response to actions:

const counterReducer = (state, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { ...state, count: state.count + action.amount };
        case 'DECREMENT':
            return { ...state, count: state.count - action.amount };
        default:
            return state;
    }
};

Selectors

Selectors allow you to retrieve specific parts of the state:

const selectCount = (state) => state.count;

Dispatching Actions

Dispatch actions to modify the state:

store.dispatch(increment(5));
store.dispatch(decrement(2));

Examples

For more detailed examples and use cases, please check the examples folder.

Contributing

We welcome contributions! If you'd like to contribute to YASM, please follow our contribution guidelines.

License

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

We hope YASM proves to be a valuable addition to your React projects. If you have any questions or encounter issues, please feel free to reach out to our community or open an issue on our GitHub repository. Happy coding!