Integration of React Components with Redux Store

This guide demonstrates how to integrate Syncfusion^® React components with a global state managed by Redux Store.

What is Redux store?

Redux Store is the centralized place that holds the entire state of the app. It provides methods to access, update, and subscribe to changes in the state. Redux centralizes state management, making it easier to debug and maintain complex applications.

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 --save

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

Configure the Redux slice

A Redux slice combines the state, actions, and reducer logic for a single feature into one file, making it easier to organize and maintain related state in your React application. Create a new file named textboxSlice.tsx and add the following code snippet.

import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';

interface TextBoxState {
  value: string;
}

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

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

export const { setValue } = textBoxSlice.actions;
export default textBoxSlice.reducer;

import { createSlice } from '@reduxjs/toolkit';
import type { PayloadAction } from '@reduxjs/toolkit';

interface TextBoxState {
  value: string;
}

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

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

export const { setValue } = textBoxSlice.actions;
export default textBoxSlice.reducer;

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 textBoxReducer from './textboxSlice';

export const store = configureStore({
  reducer: {
    textBox: textBoxReducer,
  }
});

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

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

export const store = configureStore({
  reducer: {
    textBox: textBoxReducer,
  }
});

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

Integrating 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>,
);

Adding 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-store' style={{ width: '250px' }}>
      <h3>Redux Store</h3>
      <TextBox
        placeholder="Enter your name"
        labelMode="Auto"
      />
    </div>
  );
};

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

export default function App() {

  return (
    <div className='redux-store' style={{ width: '250px' }}>
      <h3>Redux Store</h3>
      <TextBox
        placeholder="Enter your name"
        labelMode="Auto"
      />
    </div>
  );
};

Connect the TextBox component to Redux store

The value of the Syncfusion^® TextBox component is now managed by the Redux store . Whenever you type in the TextBox, the value is updated in the Redux store, and any component connected to the store will receive the updated value automatically. This approach provides a single source of truth for your application's state and makes it easy to manage and share the TextBox value across different parts of your application.

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

export default function App() {
  const value = useSelector((state: RootState) => state.textBox.value);
  const dispatch = useDispatch();

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

  return (
    <div className='redux-store' style={{ width: '250px' }}>
      <h3>Redux Store</h3>
      <TextBox
        placeholder="Enter your name"
        value={value}
        onChange={handleChange}
        labelMode="Auto"
      />
      <p>Redux Value: <strong>{value}</strong></p>
    </div>
  );
};

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

export default function App() {
  const value = useSelector((state: RootState) => state.textBox.value);
  const dispatch = useDispatch();

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

  return (
    <div className='redux-store' style={{ width: '250px' }}>
      <h3>Redux Store</h3>
      <TextBox
        placeholder="Enter your name"
        value={value}
        onChange={handleChange}
        labelMode="Auto"
      />
      <p>Redux Value: <strong>{value}</strong></p>
    </div>
  );
};

Run the project

Execute the following command to run the project:

npm run dev

npm run dev

The output will appear as follows:

Redux Store

Enter your name

Redux Value: Syncfusion

Redux Store

Enhance your React apps with Syncfusion components today