Can we have an example of how to use notistack in functional component?

[nilamsavani]

Hi,

I want to do the exact thing as done in https://codesandbox.io/s/github/iamhosseindhv/notistack/tree/master/examples/redux-example but I am using functional component.

Can anyone here create an example which has same functionality using the functional component?

[iamhosseindhv]

Let me know if this is buggy @nilamsavani, so I can add it to the official redux example as well.

https://codesandbox.io/s/notistack-redux-example-nj0nu

[wilsonj806]

The example looks solid, but I noticed that it doesn't use the useDispatch and useSelector hooks provided by the latest React Redux release(v7.1.x).

If that's not intentional, I can fork and post an updated CodeSandbox because I'm already trying use Notistack with the new React Redux hooks.

[iamhosseindhv]

Thanks @wilsonj806. redux-example now uses hooks only.

[wilsonj806]

Looks good @iamhosseindhv! Just a small suggestion, but I think it's better to have the FunctionalNotifier store the displayed notifications like the below:

const FunctionalNotifier = () => {
  // React Redux hooks
  const dispatch = useDispatch();
  const notifications = useSelector(state => state.app.notifications);

  // Store the displayed notifications in component state
  const [displayed, setDisplayed] = useState([]);

  const storeDisplayed = id => {
    setDisplayed(prevDisplayed => [...prevDisplayed, id]);
  };

  const removeDisplayed = id => {
    setDisplayed(prevDisplayed => [...prevDisplayed.filter(key => id !== key)]);
  };

  // doMoreStuffBelow()
}

That way it's clearer that Notifier tracks and updates displayed notifications.