Tillitsdone
down Scroll to discover

Integrate Semantic UI React with Redux Guide

Learn how to effectively integrate Semantic UI React with Redux for state management in your web applications.

Discover best practices, code examples, and real-world implementations.
thumbnail

How to Integrate Semantic UI React with Redux for State Management

A close-up overhead shot of overlapping translucent crystal formations in emerald green and golden amber tones with light refracting through the surfaces creating a pattern reminiscent of modern UI design high-quality ultra-realistic cinematic 8K UHD high resolution sharp and detail

Redux and Semantic UI React make a powerful combination for building modern web applications. Today, I’ll walk you through integrating these technologies to create a robust and beautiful application with proper state management.

Getting Started

Before diving in, make sure you have your React project set up. The first step is installing the necessary dependencies. You’ll need semantic-ui-react, redux, and react-redux packages.

Terminal window
npm install semantic-ui-react redux react-redux @reduxjs/toolkit

Setting Up Redux Store

First, let’s create a basic Redux store structure. I’ve found this organization works well for most projects:

store/index.js
import { configureStore } from '@reduxjs/toolkit';
import uiReducer from './uiSlice';
export const store = configureStore({
reducer: {
ui: uiReducer,
},
});

A macro shot of dewdrops on seaweed-colored brush stroke textures flowing diagonally across the frame from bottom left to top right with stone blue accents catching the light high-quality ultra-realistic cinematic 8K UHD high resolution sharp and detail

Creating Redux Slices

One of the things I love about Redux Toolkit is how it simplifies state management. Here’s an example of a slice for managing UI state:

store/uiSlice.js
import { createSlice } from '@reduxjs/toolkit';
const uiSlice = createSlice({
name: 'ui',
initialState: {
activeModal: null,
theme: 'light',
sidebarVisible: false,
},
reducers: {
toggleSidebar: (state) => {
state.sidebarVisible = !state.sidebarVisible;
},
setTheme: (state, action) => {
state.theme = action.payload;
},
setActiveModal: (state, action) => {
state.activeModal = action.payload;
},
},
});
export const { toggleSidebar, setTheme, setActiveModal } = uiSlice.actions;
export default uiSlice.reducer;

Integrating with Semantic UI Components

Now for the fun part - connecting our Redux state to Semantic UI React components. Here’s a practical example:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Sidebar, Menu, Button } from 'semantic-ui-react';
import { toggleSidebar } from './store/uiSlice';
const AppSidebar = () => {
const dispatch = useDispatch();
const visible = useSelector((state) => state.ui.sidebarVisible);
return (
<>
<Button onClick={() => dispatch(toggleSidebar())}>
Toggle Sidebar
</Button>
<Sidebar
as={Menu}
animation='overlay'
vertical
visible={visible}
width='wide'
>
{/* Sidebar content */}
</Sidebar>
</>
);
};

A low-angle shot of towering crystal formations in deep maroon and amber colors with light streaming through creating geometric patterns arranged in a way that suggests a modern interface design high-quality ultra-realistic cinematic 8K UHD high resolution sharp and detail

Best Practices and Tips

Through my experience, I’ve found these practices particularly helpful:

  1. Use Redux for global state only. Keep component-specific state local using useState.
  2. Leverage Semantic UI React’s built-in state props for simple interactions.
  3. Combine Redux actions to handle complex UI state changes.
  4. Utilize Redux Toolkit’s createAsyncThunk for API calls.

Real-World Example: Theme Switcher

Here’s how you can implement a theme switcher using both technologies:

import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { Dropdown } from 'semantic-ui-react';
import { setTheme } from './store/uiSlice';
const ThemeSwitcher = () => {
const dispatch = useDispatch();
const currentTheme = useSelector((state) => state.ui.theme);
const themeOptions = [
{ key: 'light', text: 'Light Theme', value: 'light' },
{ key: 'dark', text: 'Dark Theme', value: 'dark' },
];
return (
<Dropdown
selection
value={currentTheme}
options={themeOptions}
onChange={(_, data) => dispatch(setTheme(data.value))}
/>
);
};

Remember, the key to successful integration is finding the right balance between Redux state management and Semantic UI React’s built-in component states.

A bird's eye view of an abstract garden pattern made of interlocking emerald and stone blue crystalline shapes with sunlight creating dynamic shadows and reflections high-quality ultra-realistic cinematic 8K UHD high resolution sharp and detail

icons/logo-tid.svg
Talk with CEO
Ready to bring your web/app to life or boost your team with expert Thai developers?
Contact us today to discuss your needs, and let’s create tailored solutions to achieve your goals. We’re here to help at every step!
🖐️ Contact us
Let's keep in Touch
Thank you for your interest in Tillitsdone! Whether you have a question about our services, want to discuss a potential project, or simply want to say hello, we're here and ready to assist you.
We'll be right here with you every step of the way.
Contact Information
rick@tillitsdone.com+66824564755
Find All the Ways to Get in Touch with Tillitsdone - We're Just a Click, Call, or Message Away. We'll Be Right Here, Ready to Respond and Start a Conversation About Your Needs.
Address
9 Phahonyothin Rd, Khlong Nueng, Khlong Luang District, Pathum Thani, Bangkok Thailand
Visit Tillitsdone at Our Physical Location - We'd Love to Welcome You to Our Creative Space. We'll Be Right Here, Ready to Show You Around and Discuss Your Ideas in Person.
Social media
Connect with Tillitsdone on Various Social Platforms - Stay Updated and Engage with Our Latest Projects and Insights. We'll Be Right Here, Sharing Our Journey and Ready to Interact with You.
We anticipate your communication and look forward to discussing how we can contribute to your business's success.
We'll be here, prepared to commence this promising collaboration.
Frequently Asked Questions
Explore frequently asked questions about our products and services.
Whether you're curious about features, warranties, or shopping policies, we provide comprehensive answers to assist you.