@flownet/react-app-state

This project provides a simplified state management solution for React applications using Redux. Designed to streamline managing application-level state, this package offers a provider component and a set of actions to update, add, remove, or clear state data seamlessly within your React app.

How It Works

The package utilizes Redux Toolkit to set up a Redux store with a reducer capable of handling typical state operations such as adding, updating, or removing items. It simplifies the process of dispatching these actions by providing pre-defined action creators. Additionally, a ReduxProvider component is included to wrap your React app, making the Redux store available to all components.

Key Features

• Redux Store Configuration: Pre-configures a Redux store with common state management operations.
• Provider Component: Offers a ReduxProvider to wrap your React application, giving access to the centralized state.
• State Modifications: Includes actions to add, update, remove, or clear data within the state.
• Action Creators: Simplified dispatching of state actions through concise function calls.

Conclusion

This project serves as a straightforward solution for managing application state in React using Redux. With pre-configured utilities and actions, it reduces the setup complexity and lets developers focus on developing their application rather than writing extensive state management logic.

@flownet/react-app-state Developer Guide

Overview

@flownet/react-app-state is a state management library designed for React applications. It leverages Redux Toolkit to provide a structured and efficient way to manage the state of an application. The core functionality of this library allows developers to easily add, update, remove, and clear sections of the application state through a series of predefined actions and a Redux store.

Installation

To include @flownet/react-app-state in your project, you can install it via npm or yarn:

npm install @flownet/react-app-state

or

yarn add @flownet/react-app-state

Usage

Setting Up

To start using the library, you need to integrate the provided ReduxProvider and store in your application.

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider as ReduxProvider, Store as store } from '@flownet/react-app-state';

function App() {
  return (
    <ReduxProvider>
      <YourComponent />
    </ReduxProvider>
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

Modifying State

The library offers actions to manage the state by using the Action export. Here's how you can use these actions:

import { Action } from '@flownet/react-app-state';
import { useDispatch } from 'react-redux';

function YourComponent() {
  const dispatch = useDispatch();

  const addItem = () => {
    dispatch(Action.add('items', { id: 1, name: 'New Item' }));
  };

  const updateItem = () => {
    dispatch(Action.update('items', { id: 1, name: 'Updated Item' }, item => item.id === 1));
  };

  const removeItem = () => {
    dispatch(Action.remove('items', item => item.id === 1));
  };

  const clearAll = () => {
    dispatch(Action.clear());
  };

  return (
    <div>
      <button onClick={addItem}>Add Item</button>
      <button onClick={updateItem}>Update Item</button>
      <button onClick={removeItem}>Remove Item</button>
      <button onClick={clearAll}>Clear All</button>
    </div>
  );
}

Examples

Adding an Item

Add an item to a list by dispatching the add action:

dispatch(Action.add('items', { id: 1, name: 'Item 1' }));

Updating an Item

Update specific items using a finder function:

dispatch(Action.update('items', { name: 'Updated Item' }, item => item.id === 1));

Removing an Item

Remove items by specifying a finder function:

dispatch(Action.remove('items', item => item.id === 1));

Clearing the State

Clear the entire state using the clear action:

dispatch(Action.clear());

Acknowledgement

This library utilizes react-redux and @reduxjs/toolkit to facilitate state management in React applications. These dependencies make it simple to integrate a robust Redux store within your React project.

Input Schema

$schema: https://json-schema.org/draft/2020-12/schema
type: object
properties:
  enhancer:
    type: object
    properties:
      add:
        type: object
        properties:
          path:
            type: string
            description: The path to the location where the value will be added.
          value:
            type: object
            description: The value to add at the specified path.
          finder:
            type: array
            items:
              type: object
            description: A function or function array used to locate the item within an
              array at the target path.
        required:
          - path
          - value
      remove:
        type: object
        properties:
          path:
            type: string
            description: The path to the location from where the value will be removed.
          finder:
            type: array
            items:
              type: object
            description: A function or function array used to locate the item within an
              array at the target path.
        required:
          - path
      update:
        type: object
        properties:
          path:
            type: string
            description: The path to the location where the value will be updated.
          value:
            type: object
            description: The value to update at the specified path.
          finder:
            type: array
            items:
              type: object
            description: A function or function array used to locate the item within an
              array at the target path.
        required:
          - path
          - value
      clear:
        type: object
        description: Action to clear the state.
required:
  - enhancer