npm package: @flownet/react-app-state
Description: 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 
Latest version: 0.1.22

# @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:

```bash
npm install @flownet/react-app-state
```

or

```bash
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.

```jsx
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:

```jsx
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:

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

### Updating an Item
Update specific items using a finder function:

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

### Removing an Item
Remove items by specifying a finder function:

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

### Clearing the State
Clear the entire state using the `clear` action:

```javascript
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
```yaml
$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

```