React ToolboxJS is a set of useful react tools.
npm install @rtbjs/rtbjsReact ToolboxJS is a set of useful react tools.
!npm
- React ToolboxJS
- Installation- React ToolboxJS
- Redux useState
- Motivation
- Concept
- Usage
- Options
- Redux History Tool
- Video tutorial
- Usage
- Props
- Getting Started
- Issues tracker
To install @rtbjs/rtbjs, simply use npm or yarn:
``bash`
npm install @rtbjs/rtbjsor
yarn add @rtbjs/rtbjs
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
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.
`jsx
import { Provider } from 'react-redux';
import { store } from './store';
import { TestProject } from './test-project';
import { ToolBoxProvider } from '@rtbjs/rtbjs';
const TestProjectHOC = () => {
return (
);
};
export default TestProjectHOC;
`
Add toolBoxEnhancer:
`jsx
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
export type AppDispatch = typeof store.dispatch;
`
Use to save state in your components:
`jsx
import { useState } from '@rtbjs/rtbjs';
import { TestProject2 } from './test-project2';
const TestProject = () => {
const [value, setValue] = useState({
initialValue: 10,
});
return (
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 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.
Save, use and share Redux states!
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.
You can use Redux History in your React application as follows:
`jsx
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 (
onClose={onClose}
store={store}
companyId="your-company-id"
apiKey="your-api-key"
/>
);
};
export default App;
`
- 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.
When you first add
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.
Please report any issues and feature requests to: issues tracker
---