Entity Framework Tutorial: Set Up the Master Redux Toolkit in Just a Few Minutes!

If you've ever felt Redux setup was too verbose or complex, you're not alone. That's exactly why I created a concise, beginner-friendly guide to streamline your Redux Toolkit integration in React projects.

Steps for RTK setup

Step	Description
Install	Install @reduxjs/toolkit and react-redux
Slice	Create a todoSlice for the todos logic
Store	Configure the Redux store with the todo reducer
Provider	Wrap the app with the Provider
Components	Use useSelector and useDispatch in components

1. Install Redux Toolkit & React-Redux

npm install @reduxjs/toolkit react-redux

2. Create the Todo Slice

Creating a slice requires a string name to identify the slice, an initial state value, and one or more reducer functions to define how the state can be updated. Once a slice is created, we can export the generated Redux action creators and the reducer function for the whole slice.

// src/redux/todoSlice.js
import { createSlice } from "@reduxjs/toolkit";

const todoSlice = createSlice({
  name: "todo",
  initialState: [],
  reducers: {
    addTodo: (state, action) => {
      state.push({
        id: Date.now(),
        text: action.payload,
        completed: false,
      });
    },
    updateTodo: (state, action) => {
      const { id, newText } = action.payload;
      const todo = state.find((todo) => todo.id === id);
      if (todo) {
        todo.text = newText;
      }
    },
    deleteTodo: (state, action) => {
      return state.filter((t) => t.id !== action.payload);
    },
  },
});
// Export actions and reducer
export const { addTodo, updateTodo, deleteTodo } = todoSlice.actions;
export default todoSlice.reducer;

3. Configure the Store

// src/redux/store.js
import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./todoSlice";

export const store = configureStore({
  reducer: {
    todo: todoReducer,
  },
});

4. Provide the Store to React

// src/index.js
import React from "react";
import ReactDOM from "react-dom/client";
import { Provider } from "react-redux";
import { store } from "./redux/store";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

RTK configuration is done, now you can use it in your features/components.

5. TodoInput Component

// src/components/TodoInput.js
import React, { useState } from "react";
import { useDispatch } from "react-redux";
import { addTodo } from "../redux/todoSlice";

function TodoInput() {
  const [text, setText] = useState("");
  const dispatch = useDispatch();

  const handleAdd = () => {
    if (text.trim()) {
      dispatch(addTodo(text));
      setText("");
    }
  };

  return (
    <div>
      <input
        value={text}
        onChange={e => setText(e.target.value)}
        placeholder="Enter todo"
      />
      <button onClick={handleAdd}>Add Todo</button>
    </div>
  );
}

export default TodoInput;

6. TodoList Component

// src/components/TodoList.js
import React from "react";
import { useSelector, useDispatch } from "react-redux";
import { updateTodo, deleteTodo } from "../redux/todoSlice";

function TodoList() {
  const todos = useSelector(state => state.todo);
  const dispatch = useDispatch();

  const handleUpdate = (id) => {
    const newText = prompt("Update todo text:");
    if (newText) {
      dispatch(updateTodo({ id, newText }));
    }
  };

  return (
    <ul>
      {todos.map(todo => (
        <li key={todo.id}>
          {todo.text}
          <button onClick={() => handleUpdate(todo.id)}>Update</button>
          <button onClick={() => dispatch(deleteTodo(todo.id))}>Delete</button>
        </li>
      ))}
    </ul>
  );
}

export default TodoList;

7. App Component

// src/App.js
import React from "react";
import TodoInput from "./components/TodoInput";
import TodoList from "./components/TodoList";

function App() {
  return (
    <div>
      <h2>Redux Toolkit Todo App</h2>
      <TodoInput />
      <TodoList />
    </div>
  );
}

export default App;

Windows Hosting Recommendation

HostForLIFEASP.NET receives Spotlight standing advantage award for providing recommended, cheap and fast ecommerce Hosting including the latest Magento. From the leading technology company, Microsoft. All the servers are equipped with the newest Windows Server 2022, SQL Server 2019, ASP.NET Core 10.0, ASP.NET MVC 6.0, Silverlight 5, WebMatrix and Visual Studio Lightswitch. Security and performance are at the core of their Magento hosting operations to confirm every website and/or application hosted on their servers is highly secured and performs at optimum level. mutually of the European ASP.NET hosting suppliers, HostForLIFE guarantees 99.9% uptime and fast loading speed. From €3.49/month , HostForLIFE provides you with unlimited disk space, unlimited domains, unlimited bandwidth,etc, for your website hosting needs.