redux-state-management

name	redux-state-management
description	Master Redux Toolkit for production state management including slices, async thunks, RTK Query, and error handling
sasmp_version	2.0.0
bonded_agent	04-state-management
bond_type	PRIMARY_BOND
input_validation	{"required_packages":[{"@reduxjs/toolkit":">=2.0.0"},{"react-redux":">=9.0.0"}]}
output_format	{"code_examples":"typescript","test_template":"jest"}
error_handling	{"patterns":["retry_query","optimistic_update","error_boundary"],"retry_config":{"max_retries":3,"backoff_multiplier":2}}
observability	{"logging":"redux_devtools","metrics":["action_count","state_size"]}

Redux State Management Skill

Overview

Master Redux Toolkit for state management in React applications, including store configuration, slices, async operations, and RTK Query for API state.

Learning Objectives

• Configure Redux store with Redux Toolkit
• Create slices and reducers
• Handle async operations with createAsyncThunk
• Use RTK Query for API data management
• Integrate Redux DevTools

Quick Start

Installation

npm install @reduxjs/toolkit react-redux

Store Setup

// store.js
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './features/counter/counterSlice';
import userReducer from './features/user/userSlice';

export const store = configureStore({
  reducer: {
    counter: counterReducer,
    user: userReducer
  }
});

// App.jsx
import { Provider } from 'react-redux';
import { store } from './store';

function App() {
  return (
    <Provider store={store}>
      <YourApp />
    </Provider>
  );
}

Creating Slices

// counterSlice.js
 { createSlice }  ;

 counterSlice = ({
  : ,
  : { :  },
  : {
    :  {
      state. += ; 
    },
    :  {
      state. -= ;
    },
    :  {
      state. += action.;
    }
  }
});

  { increment, decrement, incrementByAmount } = counterSlice.;
  counterSlice.;