React Redux Toastr

Common errors

• TypeError: Cannot read properties of undefined (reading 'toastr')

  cause The `react-redux-toastr` reducer is either not mounted in the Redux store or is mounted under a different key than 'toastr' without the `getState` prop being set.
  fix Ensure `toastr: toastrReducer` is present in your `combineReducers` call, or configure `<ReduxToastr getState={(state) => state.yourCustomKey} />` if using a custom state path.

• Toastr messages are dispatched but not visible on the screen, or appear unstyled.

  cause The required CSS styles (`react-redux-toastr.min.css`) have not been imported or are not correctly loaded by the application's build system.
  fix Add `import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';` to your application's entry point (e.g., `index.js` or `App.js`).

• ReferenceError: toastr is not defined

  cause The `toastr` emitter utility was not correctly imported before being used.
  fix Ensure `import { toastr } from 'react-redux-toastr';` is present in any file attempting to call `toastr.success()`, `toastr.info()`, etc.

Warnings

• gotcha The CSS styles for `react-redux-toastr` are not automatically included and must be explicitly imported in your project for the toast messages to render correctly.
  Fix: Add `import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';` to your main application entry file or ensure the SCSS file is processed by your build system.
• gotcha By default, the `toastr` reducer expects to be mounted under the key `toastr` in your root Redux store (e.g., `state.toastr`). If you mount it under a different key, you must pass the `getState` prop to the `ReduxToastr` component to specify the correct path.
  Fix: Ensure your reducer is `toastr: toastrReducer` or set `<ReduxToastr getState={(state) => state.yourCustomKey} />` if using a different mount point.
• breaking While `react-redux-toastr` v8.0.0 did not explicitly list breaking changes in its own changelog from v7, a key peer dependency, `react-redux` v8, introduced breaking changes for React 18 compatibility, notably requiring the `useSyncExternalStore` hook. Users upgrading to `react-redux` v8 should be aware of its own migration path.
  Fix: Consult the `react-redux` v8 migration guide (e.g., for React 18 compatibility) and ensure your `react-redux` and `react` versions are compatible.
• breaking Version 7.0.0 introduced breaking changes including adding a CSS prefix to all styles and removing `transitionIn` and `transitionOut` options directly from `confirm` methods, consolidating animation control at the main `ReduxToastr` component level.
  Fix: Review your CSS for `toastr` class names and adjust `confirm` configurations to use global `ReduxToastr` transition props.
• gotcha The `transitionIn` and `transitionOut` props applied to the `ReduxToastr` component globally affect the animation of confirm dialogs as well, which might not always be the desired behavior if different animations are expected for toasts versus confirms.
  Fix: Be mindful that global transition settings will apply to confirms. Custom component options for confirms might offer more granular control if needed.

Install

• npm install react-redux-toastr npm
• yarn add react-redux-toastr yarn
• pnpm add react-redux-toastr pnpm

Imports

• ReduxToastr
  wrong:

  const ReduxToastr = require('react-redux-toastr')

  correct:

  import ReduxToastr from 'react-redux-toastr'

  This is the default export for the main component.
• reducer
  wrong:

  import { toastrReducer } from 'react-redux-toastr'

  correct:

  import { reducer as toastrReducer } from 'react-redux-toastr'

  The reducer is a named export, typically aliased as 'toastrReducer' when combined with other reducers.
• toastr
  wrong:

  import toastr from 'react-redux-toastr/lib/toastr'

  correct:

  import { toastr } from 'react-redux-toastr'

  The `toastr` emitter for triggering notifications is a named export from the main package.

Quickstart

This quickstart demonstrates how to set up `react-redux-toastr` by adding its reducer to the Redux store, rendering the `ReduxToastr` component at the application root, and triggering various toast messages (success, info, error, confirm) using the `toastr` emitter.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { createStore, combineReducers } from 'redux';
import { Provider } from 'react-redux';
import ReduxToastr, { reducer as toastrReducer, toastr } from 'react-redux-toastr';

// Import CSS styles (mandatory)
import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';

// 1. Add the reducer to your Redux store
const rootReducer = combineReducers({
  // ... other reducers ...
  toastr: toastrReducer // <- Mounted at 'toastr' by default
});

const store = createStore(rootReducer);

// 2. Create a component to trigger toasts
const MyAppComponent = () => {
  return (
    <div>
      <h1>Welcome to React Redux Toastr Demo</h1>
      <button onClick={() => toastr.success('Success!', 'This is a success message.')}>
        Show Success Toast
      </button>
      <button onClick={() => toastr.info('Info', 'This is an information message.')}>
        Show Info Toast
      </button>
      <button onClick={() => toastr.error('Error', 'Something went wrong!', { timeOut: 0 })}>
        Show Error Toast (no timeout)
      </button>
      <button onClick={() => toastr.confirm('Are you sure?', {
        onOk: () => console.log('Confirmed'),
        onCancel: () => console.log('Cancelled')
      })}>
        Show Confirm Toast
      </button>
    </div>
  );
};

// 3. Render the ReduxToastr component at your app root
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <MyAppComponent />
    <ReduxToastr
      timeOut={4000}
      newestOnTop={false}
      preventDuplicates
      position="top-right"
      getState={(state) => state.toastr} // Default, can be customized
      transitionIn="fadeIn"
      transitionOut="fadeOut"
      progressBar
      closeOnToastrClick
    />
  </Provider>
);