How To Implement Optimistic Updates in Redux Applications?

// src/api/index.js

export const api = {
    addItem: async (item) => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                if (Math.random() > 0.2) {
                    resolve({ data: item });
                } else {
                    reject(new Error('Failed to add item'));
                }
            }, 500);
        });
    },
};

// src/store/actions.js

import { api } from '../api';

export const addItemOptimistic = (item) => ({
    type: 'ADD_ITEM_OPTIMISTIC',
    payload: item,
});

export const addItemSuccess = (item) => ({
    type: 'ADD_ITEM_SUCCESS',
    payload: item,
});

export const addItemFailure = (error, item) => ({
    type: 'ADD_ITEM_FAILURE',
    payload: { error, item },
});

export const addItem = (item) => async (dispatch) => {
    dispatch(addItemOptimistic(item));

    try {
        await api.addItem(item);
        dispatch(addItemSuccess(item));
    } catch (error) {
        dispatch(addItemFailure(error, item));
    }
};

// src/store/reducer.js

const initialState = {
    items: [],
    loading: false,
    error: null,
};

export const reducer = 
(state = initialState, action) => {
    switch (action.type) {
        case 'ADD_ITEM_OPTIMISTIC':
            return {
                ...state,
                items: [...state.items, action.payload],
            };
        case 'ADD_ITEM_SUCCESS':
            return {
                ...state,
                loading: false,
            };
        case 'ADD_ITEM_FAILURE':
            return {
                ...state,
                items: state.items.filter(item => 
item.id !== action.payload.item.id),
                error: action.payload.error,
            };
        default:
            return state;
    }
};

// src/store/store.js

import { createStore, applyMiddleware } from 'redux';
import { thunk } from 'redux-thunk';
import { reducer } from './reducer';

const store = createStore(reducer, 
applyMiddleware(thunk));

export default store;

//src/App.js

import React, { useState } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { addItemOptimistic } from './store/actions';

const App = () => {
  const [input, setInput] = useState('');
  const items = useSelector(state => state.items);
  const dispatch = useDispatch();

  const handleAddItem = () => {
    const newItem = { id: Date.now(), text: input };
    dispatch(addItemOptimistic(newItem));
    setInput('');
  };

  return (
    <div style={{ padding: '20px', 
maxWidth: '600px', margin: '0 auto' }}>
      <h1>Optimistic Updates with Redux</h1>
      <input
        type="text"
        value={input}
        onChange={(e) => setInput(e.target.value)}
        placeholder="Add a new item"
        style={{ padding: '10px', width: '100%', 
boxSizing: 'border-box' }}
      />
      <button onClick={handleAddItem} 
style={{ marginTop: '10px', padding: '10px', width: '100%' }}>
        Add Item
      </button>
      <ul style={{ listStyle: 'none', padding: 0 }}>
        {items.map(item => (
          <li key={item.id} style={{ 
padding: '10px', borderBottom: '1px solid #ccc' }}>
            {item.text}
          </li>
        ))}
      </ul>
    </div>
  );
};

export default App;

// src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store/store';
import App from './App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);