ReactとReduxを活用した通知システム構築ガイド：トーストとモーダルの実装方法

const initialState = {
  toastQueue: [], // トースト通知のリスト
  modal: {         // モーダル通知の状態
    isVisible: false,
    content: null, // モーダルの内容
  },
};

   npm install redux react-redux

   import { createStore } from 'redux';
   import rootReducer from './reducers';

   const store = createStore(rootReducer);

   export default store;

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

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

// actionTypes.js
export const ADD_TOAST = 'ADD_TOAST';
export const REMOVE_TOAST = 'REMOVE_TOAST';
export const SHOW_MODAL = 'SHOW_MODAL';
export const HIDE_MODAL = 'HIDE_MODAL';

// actions.js
import { ADD_TOAST, REMOVE_TOAST, SHOW_MODAL, HIDE_MODAL } from './actionTypes';

// トースト通知を追加
export const addToast = (message, type) => ({
  type: ADD_TOAST,
  payload: { message, type },
});

// トースト通知を削除
export const removeToast = (id) => ({
  type: REMOVE_TOAST,
  payload: id,
});

// モーダルを表示
export const showModal = (content) => ({
  type: SHOW_MODAL,
  payload: content,
});

// モーダルを非表示
export const hideModal = () => ({
  type: HIDE_MODAL,
});

// reducers/toastReducer.js
import { ADD_TOAST, REMOVE_TOAST } from '../actionTypes';

const initialState = [];

const toastReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TOAST:
      return [...state, { id: Date.now(), ...action.payload }];
    case REMOVE_TOAST:
      return state.filter((toast) => toast.id !== action.payload);
    default:
      return state;
  }
};

export default toastReducer;

// reducers/modalReducer.js
import { SHOW_MODAL, HIDE_MODAL } from '../actionTypes';

const initialState = {
  isVisible: false,
  content: null,
};

const modalReducer = (state = initialState, action) => {
  switch (action.type) {
    case SHOW_MODAL:
      return { isVisible: true, content: action.payload };
    case HIDE_MODAL:
      return { isVisible: false, content: null };
    default:
      return state;
  }
};

export default modalReducer;

// reducers/index.js
import { combineReducers } from 'redux';
import toastReducer from './toastReducer';
import modalReducer from './modalReducer';

const rootReducer = combineReducers({
  toasts: toastReducer,
  modal: modalReducer,
});

export default rootReducer;

// components/ToastContainer.js
import React, { useEffect } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { removeToast } from '../actions';

const ToastContainer = () => {
  const toasts = useSelector((state) => state.toasts);
  const dispatch = useDispatch();

  useEffect(() => {
    if (toasts.length > 0) {
      const timer = setTimeout(() => {
        dispatch(removeToast(toasts[0].id));
      }, 3000); // 3秒後に自動消去

      return () => clearTimeout(timer);
    }
  }, [toasts, dispatch]);

  return (
    <div style={styles.container}>
      {toasts.map((toast) => (
        <div key={toast.id} style={{ ...styles.toast, ...getToastStyle(toast.type) }}>
          {toast.message}
        </div>
      ))}
    </div>
  );
};

// スタイル設定
const styles = {
  container: {
    position: 'fixed',
    top: '10px',
    right: '10px',
    zIndex: 1000,
    display: 'flex',
    flexDirection: 'column',
    gap: '10px',
  },
  toast: {
    padding: '10px 20px',
    borderRadius: '5px',
    boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
    color: '#fff',
    fontSize: '14px',
  },
};

// トーストの種類に応じたスタイル
const getToastStyle = (type) => {
  switch (type) {
    case 'success':
      return { backgroundColor: 'green' };
    case 'error':
      return { backgroundColor: 'red' };
    case 'warning':
      return { backgroundColor: 'orange' };
    default:
      return { backgroundColor: 'gray' };
  }
};

export default ToastContainer;

import React from 'react';
import ToastContainer from './components/ToastContainer';

const App = () => {
  return (
    <div>
      <h1>React Redux Notification System</h1>
      <ToastContainer />
    </div>
  );
};

export default App;

import { useDispatch } from 'react-redux';
import { addToast } from './actions';

const TestButton = () => {
  const dispatch = useDispatch();

  const handleAddToast = () => {
    dispatch(addToast('This is a success message', 'success'));
  };

  return <button onClick={handleAddToast}>Show Toast</button>;
};

export default TestButton;

// components/Modal.js
import React from 'react';
import { useSelector, useDispatch } from 'react-redux';
import { hideModal } from '../actions';

const Modal = () => {
  const modal = useSelector((state) => state.modal);
  const dispatch = useDispatch();

  if (!modal.isVisible) {
    return null;
  }

  return (
    <div style={styles.overlay}>
      <div style={styles.modal}>
        <button style={styles.closeButton} onClick={() => dispatch(hideModal())}>
          ×
        </button>
        <div style={styles.content}>{modal.content}</div>
      </div>
    </div>
  );
};

// スタイル設定
const styles = {
  overlay: {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'rgba(0, 0, 0, 0.5)',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 1000,
  },
  modal: {
    backgroundColor: '#fff',
    padding: '20px',
    borderRadius: '8px',
    boxShadow: '0 4px 10px rgba(0, 0, 0, 0.3)',
    maxWidth: '500px',
    width: '90%',
    position: 'relative',
  },
  closeButton: {
    position: 'absolute',
    top: '10px',
    right: '10px',
    border: 'none',
    background: 'none',
    fontSize: '18px',
    cursor: 'pointer',
  },
  content: {
    marginTop: '20px',
    fontSize: '16px',
    textAlign: 'center',
  },
};

export default Modal;

import React from 'react';
import Modal from './components/Modal';

const App = () => {
  return (
    <div>
      <h1>React Redux Notification System</h1>
      <Modal />
    </div>
  );
};

export default App;

import { useDispatch } from 'react-redux';
import { showModal } from './actions';

const TestModalButton = () => {
  const dispatch = useDispatch();

  const handleShowModal = () => {
    dispatch(showModal('This is the modal content!'));
  };

  return <button onClick={handleShowModal}>Show Modal</button>;
};

export default TestModalButton;

import { useDispatch } from 'react-redux';
import { addToast, showModal } from './actions';

const NotificationTriggers = () => {
  const dispatch = useDispatch();

  const triggerToast = () => {
    dispatch(addToast('This is a toast notification!', 'success'));
  };

  const triggerModal = () => {
    dispatch(showModal('This is a modal notification!'));
  };

  return (
    <div>
      <button onClick={triggerToast}>Trigger Toast</button>
      <button onClick={triggerModal}>Trigger Modal</button>
    </div>
  );
};

export default NotificationTriggers;

import React from 'react';
import { Provider } from 'react-redux';
import store from './store';
import ToastContainer from './components/ToastContainer';
import Modal from './components/Modal';
import NotificationTriggers from './components/NotificationTriggers';

const App = () => {
  return (
    <Provider store={store}>
      <div>
        <h1>React Redux Notification System</h1>
        <NotificationTriggers />
        <ToastContainer />
        <Modal />
      </div>
    </Provider>
  );
};

export default App;

  import toastReducer from '../reducers/toastReducer';
  import { addToast, removeToast } from '../actions';

  test('トースト通知を追加する', () => {
    const initialState = [];
    const newState = toastReducer(initialState, addToast('Test message', 'success'));
    expect(newState).toHaveLength(1);
    expect(newState[0].message).toBe('Test message');
  });

  test('トースト通知を削除する', () => {
    const initialState = [{ id: 1, message: 'Test', type: 'success' }];
    const newState = toastReducer(initialState, removeToast(1));
    expect(newState).toHaveLength(0);
  });

  import modalReducer from '../reducers/modalReducer';
  import { showModal, hideModal } from '../actions';

  test('モーダルを表示する', () => {
    const initialState = { isVisible: false, content: null };
    const newState = modalReducer(initialState, showModal('Test modal content'));
    expect(newState.isVisible).toBe(true);
    expect(newState.content).toBe('Test modal content');
  });

  test('モーダルを非表示にする', () => {
    const initialState = { isVisible: true, content: 'Test' };
    const newState = modalReducer(initialState, hideModal());
    expect(newState.isVisible).toBe(false);
    expect(newState.content).toBeNull();
  });

import { render, screen } from '@testing-library/react';
import { Provider } from 'react-redux';
import store from '../store';
import ToastContainer from '../components/ToastContainer';
import Modal from '../components/Modal';

test('トースト通知がレンダリングされる', () => {
  render(
    <Provider store={store}>
      <ToastContainer />
    </Provider>
  );
  // 通知がない状態を確認
  expect(screen.queryByText(/Test message/)).toBeNull();
});

test('モーダルがレンダリングされる', () => {
  render(
    <Provider store={store}>
      <Modal />
    </Provider>
  );
  // モーダルが非表示の状態を確認
  expect(screen.queryByText(/Test modal content/)).toBeNull();
});

dispatch(addToast('This is an info message', 'info'));

dispatch(addToast('This will stay longer', 'success', 5000)); // 5秒表示