Creating a Context Menu with React-Redux

Question

We use Redux in large parts of our React application. One area where we struggle with is the context menu. Up to now it worked like this:

onRightClick -> createItems -> openMenu -> onItemClick: invoke callback and close menu

So we had a callback in each item when it is clicked. With Redux, that no longer works, because:

dispatch(actionCreator_openContextMenu(items))

... performs a store update. The Redux action returned by the action creator cannot have callbacks in it, because they are not serializable/jsonizable.

We furthermore need to perform asynchronous operations (i.e. server roundtrips) in many context menu click actions, so the click actions are not plain store updates.

The question is: how does this align with the Redux pattern and its constraints? How would one do this with Redux?

To clarify: this question is not about the UI side in react, it's about redux.

markerikson · Accepted Answer · 2017-05-16 17:29:37Z

2

I actually wrote an article that covers this exact question: Creating Reusable Generic Modals in React and Redux. The approach I described in that article can be summarized as having the code that requests the dialog include a pre-made action object that gets passed to the dialog component as a prop, and the dialog can then dispatch that action (possibly with additional info attached) when it's closed.

A couple other options:

Have the dialog dispatch some "signal" action when it closes, and use sagas or observables to execute the additional async logic in response
There's an interesting-looking library called redux-promising-modals. I haven't used it yet myself, but it appears to have a prebuilt middleware and reducer for tracking a lost of open modals. The middleware returns a promise whenever you dispatch PUSH_MODAL_WINDOW, and will resolve the promise when you dispatch the corresponding POP_MODAL_WINDOW.

answered May 16, 2017 at 17:29

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martin Häusler Over a year ago

Thanks for this answer. Our internal discussion was similar. "Just include an action to call on close" - "But we need an async action creator there!" - "Then use Redux Saga!" ... and I was like "What? Shooting birds with cannonballs? Come on, there has to be a simpler way to do this." Apparently I was wrong. Redux does have its dark sides I suppose. Still, thanks for the comprehensive answer.

markerikson Over a year ago

For what it's worth, you can include functions in action objects, and Redux itself will work - it's primarily time-travel debugging that may have issues. See redux.js.org/docs/faq/Actions.html#actions-string-constants and blog.isquaredsoftware.com/2017/05/… for more information. And Redux-Saga is meant for this use case of distributed/async behavior based on dispatched actions.

Simeon Simeonoff · Accepted Answer · 2017-05-16 08:28:00Z

0

I think what you are looking for is a redux middleware that could handle async side effects. There are dozens of libraries out there that can help with this, but I would suggest your team looks into some of the following libraries that have great communities and are well documented:

Redux-Saga https://github.com/redux-saga/redux-saga (easy to understand and test)
Redux-Thunk https://github.com/gaearon/redux-thunk (extremely easy to understand, hard to test)
Redux-Observable https://redux-observable.js.org/ (you would need some previous knowledge on reactive programming, easier to test than redux-thunk)

answered May 16, 2017 at 8:28

Simeon Simeonoff

1462 silver badges7 bronze badges

Collectives™ on Stack Overflow

Creating a Context Menu with React-Redux

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related