Passing more than one argument in api action

[ajeetvarma]

Thanks for such a amazing package. It is the best package to which i understand solution for server side rendering . I have a little issue . Images have been fetched at /media route after passing one argument searchQuery in src/api/media/flickrImages api . I have need to pass one more argument like pageNum like this (searchQuery, pageNum) .

And in src/view/media/ file i have called redux call like this below

    class Media extends Component {
          componentDidMount() {
          this.props.dispatch(searchMediaAction('react' ,pageNum));
      }
     handleSearch(event) {
         event.preventDefault();
         if (this.query !== null) {
          this.props.dispatch(searchMediaAction(this.query.value, pageNum));
       }
    }

In api i have done like this

   export const flickrImages = (searchQuery, pageNum) => {
      searchQuery = searchQuery || 'new year 2018';
      pageNum = pageNum;
      const FLICKR_API_ENDPOINT =`${BASE_URL}method=flickr.photos.search&text=${searchQuery}&api_key=${FLICKR_API_KEY}&format=json&nojsoncallback=1&per_page=${pageNum}`;
        return fetch(FLICKR_API_ENDPOINT).then(response => {
                  return response.json();
                }) .then(json => {
                  const data = json.photos.photo.map(({ farm, server, id, secret, title }) => ({
                      id,
                       title,
                        mediaUrl: `https://farm${farm}.staticflickr.com/${server}/${id}_${secret}.jpg`
                     }));
                    return { data };
                })
                 .catch(ex => (
                     {
                          metadata: {
                           error: ex
                       }
                  }
             ));
       };

But unfortunately value of pageNum in api calling is coming asundefined like this

https://api.flickr.com/services/rest/?method=flickr.photos.search&text=react&api_key=a46a979f39c49975dbdd23b378e6d3d5&format=json&nojsoncallback=1&per_page=undefined

Please suggest me to pass more than one argument in api call while i will not have to use routes params actually ..

Thanks a lot

[gzoreslav]

Thank you for the feedback, @ajeetvarma !

Due to Redux documentation https://redux.js.org/docs/basics/Actions.html, action contains from type and some data only. But you always may pass data like an object to pass more details to API:

const payload = { searchQuery: 'react', pageNum: 1 }; this.props.dispatch(searchMediaAction(payload));

And use this in the API:

export const flickrImages = (payload) => { const searchQuery = payload.searchQuery; const pageNum = payload.pageNum; ...

or using ES6 features just like this:

export const flickrImages = ({searchQuery, pageNum}) => { ...

In this case you may pass everything you need. Hope it helps :)