React Redux: dispatch returning data to component

Question

I have a component with a form that will add an item. When the form is submitted I'm dispatching an async action using redux, something like this:

_onSubmit(event) {
    const { dispatch } = this.props;
    const { data } = this.state;
    event.preventDefault();

    dispatch(addItem(data));
  }

Now, my back-end will create a task with an id that I can track progress. Usually this given task will take a while to complete, so I want to show the notification bar.

For me to track that task, I need to retrieve the task id for this given task that is in progress. So I thought about adding a callback function so that I could get this information from the dispatcher, something like this:

_onSubmit(event) {
        const { dispatch } = this.props;
        const { data } = this.state;
        event.preventDefault();

        dispatch(addItem(data, (id) => console.log(id)));
      }

But this feels kind of "hacky" as there is a two-way data communication going on.

Question: What is the redux way of achieving this?

So your endpoints is sending out a response immediately once its received the posts request with the id of the task? — KornholioBeavis
– KornholioBeavis, Commented Apr 8, 2017 at 6:24
Ok, so the process is something like: 1. fething_task_Id 2. taskId_fetched_successfully //Loading, task running somewhere in the background 3. task_finished // Data //Render data — KornholioBeavis
– KornholioBeavis, Commented Apr 8, 2017 at 9:41

shobhit1 · Accepted Answer · 2017-04-08 05:16:41Z

1

There can be multiple ways to achieve the same results for this problem.

I would say use Redux Thunk(Middleware), which will enable you to fire multiple actions from your action creator.

Then you should write something like this:

_onSubmit(event) {
 const { dispatch } = this.props;
 const { data } = this.state;
 event.preventDefault();

 dispatch(addItemActionCreator(data));
}

In your action creator, use a promise(as thunk will allow you to do that as well):

export const addItemActionCreator = (data) => (dispatch) => {
 Promise.get('data').then((data) => {
  dispatch({ type: STORE_DATA_ID, id: data.id })
 })
}

This will dispatch an action that will store id, in your state.

In your component, use connect to subscribe to id and your component will always have the latest id value.

Hope this helps.

answered Apr 8, 2017 at 5:16

shobhit1

6527 silver badges18 bronze badges

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

5 Comments

Alan Souza Over a year ago

Thanks for your answer, I'm already using thunk. Unfortunately I believe your answer does not solve my problem. There can be multiple tasks running, how do I know from the array of ids which one belongs to me? My object (data) does not have anything inside it that is guaranteed to be unique.

elmeister Over a year ago

Why not to add something unique inside data object?

shobhit1 Over a year ago

so, for you to track different ids, you will have constant action types which only update one portion of your state and thats how you will know the specific id. You will have to dispatch different actions to store different ids in different portion of your state, otherwise they will overlap and your constant(action type) will give you control over which portion of the state to update and then you can just subscribe that portion of the state I hope this helps.

Alan Souza Over a year ago

@elmeister I'm starting to lean towards that solution. For edit and delete I have the object id, so no problem. So I guess I will have to set a temp id for the add scenario, maybe current time in milliseconds. But this feels way more complex than just have the id callback :(

elmeister Over a year ago

For me too - I would use the id callback :)

Josep · Accepted Answer · 2017-04-09 00:57:15Z

0

There are a few different ways to achieve this. I've done something very similar using redux-saga with eventChannels.

You could also use redux-cycles or redux-observable for the same purpose: creating an observable that's subscribed to the signals of your API, and that it dispatches actions as they come.

I am not a fan of redux-thunk. Maybe there could be a way to accomplish this using redux-thunk, but I'm quite certain that it won't be easy/elegant.

answered Apr 9, 2017 at 0:57

Josep

13.1k2 gold badges44 silver badges45 bronze badges

Collectives™ on Stack Overflow

React Redux: dispatch returning data to component

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related