@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

$3


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 (



);
}

ReactDOM.render(, document.getElementById('root'));
`

$3


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 (



);
}
`

Examples

$3

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

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

$3

Update specific items using a finder function:

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

$3

Remove items by specifying a finder function:

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

$3


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

``