Using Redux Toolkit for State Management in React and React Native

Some readers reported that state management in React Native is not very clear. In the upcoming series we will compare the most common state‑management frameworks for React and React Native, discussing their usage, advantages, and drawbacks.

The previous article introduced the basic usage of Redux. This article focuses on the upgraded version: Redux Toolkit.

Below is a code example that creates a simple Todo List app with React and Redux‑Toolkit. The complete source code is provided at the end of the article.

1. Create a new React application npx create-react-app todolist 2. Install Redux‑Toolkit and React‑Redux npm install @reduxjs/toolkit react-redux 3. Create a todoSlice.ts file that defines the actions and reducers

import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { State, TODO } from "../module/todo";

const initState: State = {
    todos: [
        {
            text: "zsx clean room"
        }
    ]
};

const todoSlice = createSlice({
    name: 'todo',
    initialState: initState,
    reducers: {
        addTodo: (state: State, action: PayloadAction<string>) => {
            return { todos: [...state.todos, { text: action.payload }] };
        },
        deleteTodo: (state: State, action: PayloadAction<string>) => {
            state.todos = state.todos.filter((item: TODO) => item.text !== action.payload);
        }
    }
});

export const { addTodo, deleteTodo } = todoSlice.actions;
export default todoSlice.reducer;

The code uses createSlice to generate a slice that encapsulates both actions and reducers for the Todo feature.

4. Export the slice's actions and reducer

export const { addTodo, deleteTodo } = todoSlice.actions;
export default todoSlice.reducer;

5. Create the Redux store

import { configureStore } from "@reduxjs/toolkit";
import todoReducer from "./todoSlice";

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

export default store;

Unlike plain Redux, Redux‑Toolkit’s configureStore simplifies store creation, especially when multiple reducers are involved.

6. Provide the store to the component tree

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
root.render(
  <Provider store={store}>
    <ToolkitTodoApp />
  </Provider>
);

The Provider component from react‑redux makes the store available to all descendant components.

7. Use useSelector and useDispatch in business components

import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { State, TODO } from "../module/todo";
import store from "./store";
import { addTodo, deleteTodo } from "./todoSlice";

type RootState = ReturnType<typeof store.getState>;

const ToolkitTodoApp = () => {
    const todos = useSelector((state: RootState) => state.todo.todos);
    const dispatch = useDispatch();
    const [text, setText] = useState('');

    const handleAddTodo = () => {
        dispatch(addTodo(text));
        setText('');
    };

    const handleDeleteTodo = (text: string) => {
        dispatch(deleteTodo(text));
    };

    return (
        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center' }}>
            <h1>This Is Redux‑Toolkit TODO App.</h1>
            <ul>
                {todos && todos.map((todo: TODO, index) => (
                    <li key={index}>
                        <span>{todo.text}</span>
                        <button style={{ marginLeft: '12px' }} onClick={() => handleDeleteTodo(todo.text)}>finish</button>
                    </li>
                ))}
            </ul>
            <div style={{ display: 'flex', flexDirection: 'row' }}>
                <input value={text} onChange={e => setText(e.target.value)} />
                <button onClick={handleAddTodo}>Add Todo</button>
            </div>
        </div>
    );
};

export default ToolkitTodoApp;

Using useSelector and useDispatch eliminates the need for connect, mapStateToProps, and mapDispatchToProps, making component code more concise.

Summary of steps for managing state with Redux‑Toolkit

Create a slice with createSlice, specifying the initial state and reducer functions.

Export the slice’s actions and reducer.

Configure the store with configureStore, providing the slice reducers under appropriate keys.

Wrap the application with Provider to supply the store.

In UI components, use useSelector to read state and useDispatch to dispatch actions.

Compared with classic Redux, Redux‑Toolkit removes the boilerplate of writing action creators and connecting components, streamlining the development workflow.

Full source code: https://github.com/shixinzhang/redux-sample/tree/main/src/redux-toolkit

Follow the author’s technical public account for more sharing and learning.