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
  • Installation- @rtbjs/use-state
  • Motivation
    • Medium article about @rtbjs/use-state
  • Concept
  • Usage
  • Options
  • Issues tracker

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

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

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.

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.

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

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:

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:

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:

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.

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.

Please report any issues and feature requests to: issues tracker