npm package: @rtbjs/use-state
Description: `@rtbjs/use-state` is a state management tool that can act as a local state and be easily turned into a global redux state. It is an innovative approach to state management that combines the advantages of both React's useState and Redux's state management
Author: AndriiPopov
Latest version: 1.0.7

# useState from React ToolboxJS

`@rtbjs/use-state` is a state management tool that can act as a local state and be easily turned into a global redux state. It is an innovative approach to state management that combines the advantages of both React's useState and Redux's state management.

- [useState from React ToolboxJS](#usestate-from-react-toolboxjs)
  - [Installation- @rtbjs/use-state](#installation--rtbjsuse-state)
  - [Motivation](#motivation)
    - [Medium article about @rtbjs/use-state](#medium-article-about-rtbjsuse-state)
  - [Concept](#concept)
  - [Usage](#usage)
  - [Options](#options)
  - [Issues tracker](#issues-tracker)

## Installation- [@rtbjs/use-state](#@rtbjs/use-state)

To install `@rtbjs/use-state`, simply use npm or yarn:

```bash
npm install @rtbjs/use-state
# or
yarn add @rtbjs/use-state
```

## Motivation

### [Medium article about @rtbjs/use-state](https://medium.com/@andriy.popov.vl/choosing-between-usestate-and-redux-a-developers-dilemma-afc3f6d2b152)

When developing features in a React application, it's common to start with local state (using useState) and avoid incorporating Redux until later stages. However, this can lead to suboptimal state management as the application grows. To share state between components, developers may pass it as props and move state initialization to higher-level components. Redux useState simplifies the transition to global state and ensures efficient state management.

## Concept

Redux useState resolves the issue mentioned above by facilitating the shift from local state to global state. Initially, you don't need to specify a name for your state; it behaves like React's useState. When the need arises to access the state elsewhere, you can assign it a name, making it a global state that uses Redux store. This allows the state to be accessed and modified in various components, with changes tracked by Redux DevTools.

## Usage

To use Redux useState, wrap your application with the ToolBoxProvider provider, similar to how you wrap it with the Redux Provider.

```jsx
import { Provider } from 'react-redux';
import { store } from './store';
import { TestProject } from './test-project';
import { ToolBoxProvider } from '@rtbjs/use-state';

const TestProjectHOC = () => {
  return (
    <Provider store={store}>
      <ToolBoxProvider store={store}>
        <TestProject />
      </ToolBoxProvider>
    </Provider>
  );
};

export default TestProjectHOC;
```

Add toolBoxEnhancer:

```jsx
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counter-slice';
import { withUseState } from '@rtbjs/use-state';

export const store = configureStore({
  reducer: withUseState({
    counter: counterReducer,
  }),
});

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
```

Use to save state in your components:

```jsx
import { useState } from '@rtbjs/use-state';
import { TestProject2 } from './test-project2';

const TestProject = () => {
  const [value, setValue] = useState({
    initialValue: 10,
  });

  return (
    <div>
      <button onClick={() => setValue((value || 0) - 1)}>Decrement</button>
      <div style={{ fontSize: '30px' }}>{value}</div>
      <button onClick={() => setValue((value || 0) + 1)}>Increment</button>
      <TestProject2 />
    </div>
  );
};

export { TestProject };
```

In the case above, the name is not set and the state is local. It cannot be accessed in other components. To make it global simply add a name:

```jsx
const [value, setValue] = useState({
  initialValue: 10,
  name: 'myState',
});
```

Now in all other components where myState needs to be used, you can simply add the same code and access and edit the shared state.

## Options

useState accepts an options parameter:

- `initialValue` (any, optional): The initial value of the state. The first mounted component sets it and it is not reset by other components unless `forceInitialValue` is set to `true`.
- `name` (string, optional): Name of the state. If it is not provided, the state is local. If it is provided, the state is global and Redux is used.
- `forceInitialValue` (boolean, optional): Will set or overwrite the initial value even if it has been set before the component is mounted.
- `logs` (boolean, optional): Adds Redux DevTools logs for local state. In this case the state is given a random name. Logs are always on for global states.

## Issues tracker

Please report any issues and feature requests to: [issues tracker](https://github.com/toolbox-js/issues/issues)

---