API call using data from Redux reducer?

Question

I want to do API request to the server using data from Reducer (Updated state) after I dispatch it. I would have done it in the Dispatcher if I have enough data, but I only send necessary data to dispatcher.

How should I do it ?

/* Book list container*/
const mapStateToProps = (state) => {
    return {
      books: state.bookApp.books    
    }
}

const mapDispatchToProps = (dispatch) => {
    // Calling change book title from component
    return {
      // Dispatch new title to the book list by it's id
      onChangeBookTitle: (id, newTitle) => {
        dispatch(updateBookTitle(id, newTitle))
      }
    }
}

// Connect redux to bookList component
export default connect(
    mapStateToProps, 
    mapDispatchToProps
)(BookList);


/* Book list action creator */
export const updateBookTitle = (id, newTitle) => {
  return {
    type: 'EDIT_BOOK_TITLE',
    title: newTitle
  }
};


/* Book list reducer */
// Assume there's already a book to update
const defaultState = {
  bookList: []
}

const bookApp = (state = defaultState, action) => {
  switch(action.type) {
    case 'EDIT_BOOK_TITLE' : {
        let newBookList;
        // Create new copy of booklist
        // Do some transformation
        // And voilaa... i got new book list
        return {...state, bookList: newBookList}  
        
        // This is the place where I want to do my API call, using the new BookList data
    }
    default: 
        return state;
}

Show us the portion of code where you want to accomplish this, and what you tried so far. — G4bri3l
– G4bri3l, Commented Jun 8, 2017 at 16:50
@G4bri3l , I added some codes, please take a look at it. I tried lot of things, but it got me nowhere, so if you have any solution for this, please do help me. Thanks. — Matt Downey
– Matt Downey, Commented Jun 8, 2017 at 17:07

markerikson · Accepted Answer · 2017-06-08 17:25:53Z

2

This is a good use case for a thunk action creator:

export const updateBookTitle = (id, newTitle) => {
    return (dispatch, getState) => {
        dispatch({type : 'EDIT_BOOK_TITLE', title : newTitle});

        const updatedState = getState();        
        // read values from updated state and make an API call here     
    }
}

However, note that you should not do any API calls from a reducer! That is absolutely against how Redux is supposed to be used.

answered Jun 8, 2017 at 17:25

markerikson

67.9k10 gold badges161 silver badges177 bronze badges

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

2 Comments

Matt Downey Over a year ago

wait, where is the getState come from ? is it from thunk ? also, is the updatedState always get the latest updated state, I meant, don't you need to wait for the dispatch to be completed first ?

markerikson Over a year ago

Dispatching of plain actions is 100% synchronous, unless a middleware intercepts and delays the action. For this example, you can assume that as soon as dispatch() completes, the state has been updated. Also, when you pass a function into dispatch(), the redux-thunk middleware will call your function and pass in dispatch and getState as arguments. See daveceddia.com/what-is-a-thunk for more info, as well as the articles I have listed at github.com/markerikson/react-redux-links/blob/master/… .

Collectives™ on Stack Overflow

API call using data from Redux reducer?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related