Integration of React Components with Redux Undo

This guide demonstrates how to integrate Syncfusion^® React components with a Redux Undo.

What is Redux Undo?

Redux Undo is a higher-order reducer for Redux, designed to add undo/redo functionality to your application's state management. It works by wrapping your existing reducer and managing a history of past, present, and future states allowing users to undo or redo changes to the application state with ease.

Set up the React project

1. Create a new React project using Vite.

2. Install the necessary Redux dependencies by running the following command:

npm install @reduxjs/toolkit react-redux redux-undo --save

npm install @reduxjs/toolkit react-redux redux-undo --save

Configure the Redux slice

Setting up a Redux slice means creating a specific section of your application’s state, along with the actions and reducers that can modify this state.

By wrapping your Redux slice reducer with the undoable function from redux-undo, you can add built-in undo and redo capabilities to your state. Create a new file named textboxSlice.tsx and add the following code snippet.

import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
import undoable from 'redux-undo';

export interface TextBoxState {
  name: string;
}

const initialState: TextBoxState = {
  name: 'Syncfusion',
};

const textBoxSlice = createSlice({
  name: 'form',
  initialState,
  reducers: {
    setName: (state, action: PayloadAction<string>) => {
      state.name = action.payload;
    },
  },
});

export const { setName } = textBoxSlice.actions;
export const undoableFormReducer = undoable(textBoxSlice.reducer); // wrap with undoable

import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';
import undoable from 'redux-undo';

export interface TextBoxState {
  name: string;
}

const initialState: TextBoxState = {
  name: 'Syncfusion',
};

const textBoxSlice = createSlice({
  name: 'form',
  initialState,
  reducers: {
    setName: (state, action: PayloadAction<string>) => {
      state.name = action.payload;
    },
  },
});

export const { setName } = textBoxSlice.actions;
export const undoableFormReducer = undoable(textBoxSlice.reducer); // wrap with undoable

Set Up the Redux store

After creating the Redux slice, you need to set up the Redux store to combine your reducers and manage your application's state.

Create a new file named store.tsx and add the following code:

import { configureStore } from '@reduxjs/toolkit';
import { undoableFormReducer } from './textboxSlice';

export const store = configureStore({
  reducer: {
    form: undoableFormReducer,
  },
});

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

import { configureStore } from '@reduxjs/toolkit';
import { undoableFormReducer } from './textboxSlice';

export const store = configureStore({
  reducer: {
    form: undoableFormReducer,
  },
});

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

Integrate the Redux store with React

To make the Redux store available throughout your React application, you need to wrap your main App component with the Provider from react-redux in main.tsx file. This allows any nested component to access the Redux store state and dispatch actions.

import { Provider } from 'react-redux';
import { store } from './store'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
);

import { Provider } from 'react-redux';
import { store } from './store'
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </StrictMode>,
);

Add Syncfusion^® React components

To add Syncfusion^® React Textbox component to your application, follow these steps:

1. Install the required Syncfusion® packages

npm install @syncfusion/react-inputs --save

npm install @syncfusion/react-inputs --save

2. Import the required CSS files for the TextBox component into the src/App.css file.

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-inputs/styles/material.css';

@import '../node_modules/@syncfusion/react-base/styles/material.css';
@import '../node_modules/@syncfusion/react-inputs/styles/material.css';

3. Add the TextBox component to the application

import { TextBox } from '@syncfusion/react-inputs';
import './App.css';

export default function App() {

  return (
    <div className='redux-undo' style={{ width: '300px',padding: '2rem' }}>
      <h3>Redux Undo</h3>
      <TextBox
        placeholder="Type something"
        labelMode="Auto"
      />
    </div>
  );
};

import { TextBox } from '@syncfusion/react-inputs';
import './App.css';

export default function App() {

  return (
    <div className='redux-undo' style={{ width: '300px',padding: '2rem' }}>
      <h3>Redux Undo</h3>
      <TextBox
        placeholder="Type something"
        labelMode="Auto"
      />
    </div>
  );
};

Connect the TextBox component to Redux Undo

This section shows how to connect the TextBox component to your Redux store with undo and redo support. When you connect the TextBox component to your Redux store using redux-undo, the values entered in the TextBox can be easily undone and redone.

import { TextBox, type TextBoxChangeEvent } from '@syncfusion/react-inputs';
import { Button } from '@syncfusion/react-buttons';
import { useDispatch, useSelector } from 'react-redux';
import { setName } from './textboxSlice';
import type { RootState } from './store';
import { ActionCreators } from 'redux-undo';
import './App.css';

export default function App() {
  const dispatch = useDispatch();
  const name = useSelector((state: RootState) => state.form.present.name);

  const handleChange = (args: TextBoxChangeEvent) => {
    dispatch(setName(args.value as string));
  };

  const handleUndo = () => dispatch(ActionCreators.undo());
  const handleRedo = () => dispatch(ActionCreators.redo());

  return (
    <div className='redux-undo' style={{ width: '300px',padding: '2rem' }}>
      <h2>Redux Undo</h2>
      <TextBox
        value={name}
        onChange={handleChange}
        placeholder="Type something"
        labelMode="Auto"
      />
      <div style={{ marginTop: '1rem' }}>
        <Button onClick={handleUndo} style={{ marginRight: '0.5rem' }}>Undo</Button>
        <Button onClick={handleRedo}>Redo</Button>
      </div>
    </div>
  );
};

import { TextBox, type TextBoxChangeEvent } from '@syncfusion/react-inputs';
import { Button } from '@syncfusion/react-buttons';
import { useDispatch, useSelector } from 'react-redux';
import { setName } from './textboxSlice';
import type { RootState } from './store';
import { ActionCreators } from 'redux-undo';
import './App.css';

export default function App() {
  const dispatch = useDispatch();
  const name = useSelector((state: RootState) => state.form.present.name);

  const handleChange = (args: TextBoxChangeEvent) => {
    dispatch(setName(args.value as string));
  };

  const handleUndo = () => dispatch(ActionCreators.undo());
  const handleRedo = () => dispatch(ActionCreators.redo());

  return (
    <div className='redux-undo' style={{ width: '300px',padding: '2rem' }}>
      <h2>Redux Undo</h2>
      <TextBox
        value={name}
        onChange={handleChange}
        placeholder="Type something"
        labelMode="Auto"
      />
      <div style={{ marginTop: '1rem' }}>
        <Button onClick={handleUndo} style={{ marginRight: '0.5rem' }}>Undo</Button>
        <Button onClick={handleRedo}>Redo</Button>
      </div>
    </div>
  );
};

Run the project

Execute the following command to run the project:

npm run dev

npm run dev

The output will appear as follows:

Enhance your React apps with Syncfusion components today