React ToolboxJS

React ToolboxJS is a set of useful react tools.

• React ToolboxJS
  • Installation- React ToolboxJS
• Redux useState
  • Motivation
  • Concept
  • Usage
  • Options
• Redux History Tool
  • Video tutorial
  • Usage
    • Props
  • Getting Started
  • Issues tracker

Installation- React ToolboxJS

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

npm install @rtbjs/rtbjs
# or
yarn add @rtbjs/rtbjs

Redux useState

Redux useState is an innovative approach to state management that combines the advantages of both React's useState and Redux's state management. It is also available as a standalone package at @rtbjs/use-state

Motivation

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.

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

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 { toolBoxEnhancer } from '@rtbjs/rtbjs';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
  },
  enhancers: [toolBoxEnhancer as any],
});

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

Use to save state in your components:

import { useState } from '@rtbjs/rtbjs';
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 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.

Redux History Tool

Save, use and share Redux states!

Video tutorial

The @rtbjs/rtbjs package provides a powerful tool called Redux History for managing and sharing Redux states in your React applications. The saved states are saved in the cloud and all internal stakeholders of your company can access the shared states.

This tool simplifies debugging, collaboration, and testing by allowing you to save and restore Redux states easily. Whether you need to replicate a bug, perform quality assurance, or streamline your development process, Redux History has got you covered.

Usage

You can use Redux History in your React application as follows:

import React, { useState } from 'react';
import { Provider } from 'react-redux';
import { store } from './store';
import { ToolBox } from '@rtbjs/rtbjs';

const App = () => {
  const [isOpen, setIsOpen] = useState(false);
  const onClose = () => setIsOpen(false);

  return (
    <Provider store={store}>
      <button onClick={() => setIsOpen(true)}>Show ToolBox</button>
      <ToolBox
        isOpen={isOpen}
        onClose={onClose}
        store={store}
        companyId="your-company-id"
        apiKey="your-api-key"
      />
    </Provider>
  );
};

export default App;

Props

• isOpen (boolean): Set to true to open the ToolBox; false to close it.
• onClose (function): A callback function called when the ToolBox is closed.
• store (Redux store): Pass your Redux store to the ToolBox.
• companyId (string, optional): Your company's unique ID, generated when you create a company.
• apiKey (string, optional): Your company's API key, generated when you create a company.

Getting Started

When you first add <ToolBox /> to your app, you will be prompted to create an account and establish a company. You will receive a company ID and an API key, which you should pass as props to the ToolBox component. This setup allows users with the same company ID and API key to access and share saved states.

To start saving states, you need to create a project. Each company can have multiple projects. To save the current state, click the "Save" button. To apply a selected state, press the "Play" button. You can also organize states into folders for better organization and management.

Issues tracker

Please report any issues and feature requests to: issues tracker