score:2

Accepted answer

with saga

the returned value from calling dispatch is just the action that you dispatched. your saga will "take" this action and dispatch additional actions, but that is all considered independent. so your res variable is just the original action postspotifyalbums(obj).

or there's no way so then i need to make a second call to the reducer to give me back the just inserted obj?

yes, you would need to have a useselector in the component that is listening for the posted value.

with thunk

this is a lot easier to do with because the thunk middleware overrides the default behavior of dispatch. when you dispatch a thunk (an action creator which is a function of dispatch) then you get back the value that's returned by the thunk.

any return value from the inner function will be available as the return value of dispatch itself. this is convenient for orchestrating an asynchronous control flow with thunk action creators dispatching each other and returning promises to wait for each other's completion - docs

action

const postspotifyalbums = (payload) => async (dispatch) => {
  dispatch({ type: "post_spotify_albums_pending" });
  const args = {
    method: "post",
    url: baseurl,
    params: {
      token: payload.token,
      albumcode: payload.albumcode,
      albumgenres: payload.albumgenres,
      usercode: payload.usercode
    }
  };
  try {
    const spotifycategories = await axios.request(args);
    dispatch({
      type: "post_spotify_albums_success",
      payload: spotifycategories.data
    });
    // we can customize the returned value here to anything!
    return spotifycategories.data;
  } catch (error) {
    console.log(error);
    dispatch({ type: "post_spotify_albums_error", payload: error });
  }
};

component

const dodispatch = async () => {
  // we get back whatever we specifically returned in the thunk
  const data = await dispatch(postspotifyalbums(obj));
  console.log("result", data);
  // we didn't return anything in the error case so it would be undefined
  if (data) {
    // do something with success
  }
};

with createasyncthunk

includes a helper function createasyncthunk that automatically creates "pending" "rejected" and "fulfilled" actions in one step. the return value here is the final action that was dispatched.

when dispatched, the thunk will ... return a fulfilled promise containing the final dispatched action (either the fulfilled or rejected action object) - docs

action

const postspotifyalbums = createasyncthunk(
  "post_spotify_albums",
  async (payload) => {
    const args = {
      method: "post",
      url: baseurl,
      params: {
        token: payload.token,
        albumcode: payload.albumcode,
        albumgenres: payload.albumgenres,
        usercode: payload.usercode
      }
    };
    const spotifycategories = await axios.request(args);
    return spotifycategories.data;
  }
);

component

const dodispatch = async () => {
  const action = await dispatch(postspotifyalbums(obj));
  console.log("result", action);
  // we could have the success or the failure action
  if ( action.type === postspotifyalbums.fulfilled.type) {
    // do something with success
    const data = action.payload;
  } else {
    // do something with error
    const error = action.error;
  }
};

score:1

not sure if you are still looking for the solution or not, but here's my implementation of the code. flow goes like this.

  1. we make dispatch request from our component
  2. redux dispatches action called "initiate_transaction".
  3. redux saga intercepts the action and starts making api call based on that
  4. api call is successful and "initiate_transaction_success" is dispatched with the api's value.
  5. now saga returns value from the axios to the actual calling function from where the step 1 dispatch was called.

here's the code.

// store.js

import {middleware as thunkmiddleware} from 'redux-saga-thunk';
const middlewares = [thunkmiddleware];
const sagamiddleware = createsagamiddleware();
middlewares.push(sagamiddleware);
if (process.env.node_env === `development`) {
  const {logger} = require(`redux-logger`);

  middlewares.push(logger);
}

const persistconfig = {
  key: 'root',
  storage: asyncstorage,
  white: ['errors'],
};

const persistedreducer = persistreducer(persistconfig, rootreducer);

const store = configurestore({
  reducer: persistedreducer,
  middleware: middlewares,
  devtools: process.env.node_env === `development` ? true : false,
});

// payment.js(or any of your component)

const handlebtnclick = async (type, value) => {
    console.log('btn click type', type, route.params, value);
    switch (type) {
      case 'pay':
        try {
          let orderid = 'od_' + moment().format('yyyymmddhhmmss');
          // here we are dispatching action "initiate_transaction" to redux saga.
          // step 1.
          const response = await props.initiatepayment({
            orderid,
            orderamount: 10,
            ordercurrency: 'inr',
          });

          console.log('response', response.data.cftoken);
          }catch (error){
          console.log('error', error)
          }
          break;
}

// middleware used is redux-saga-thunk, which basically implements functionality of thunk in redux saga. so meta: {thunk: true} waits for the whole execution to finish and then continues.
// step 2
export const initiatepayment = data => ({
  type: initiate_transaction,
  data,
  meta: {thunk: true},
});

//step 3
// here post is just a custom function for api call, onerror and onsuccess are the handler functions and safe is the wrapper method which basically implements try catch logic and handles errors for us without repeating much of the code.

// paymentsaga.js
function* initiatetransactionsaga({data, meta}) {
  const response = yield call(post, api.initiate_transaction, data);
  return response; //step 4....
}

export default function* paymentsaga() {
  yield takelatest(
    initiate_transaction,
    safe(onerror, initiatetransactionsaga, onsuccess), //onsuccess required if you want values to be returned to step 1
  );
}

// axiosapi.js

export async function post(url, data, config = {}) {
  console.log('url data config', url, data, config);
  return axiosapi
    .post(url, {...data}, {...config})
    .then(response => response.data);
}

// sagahelper.js


/**
 * @param handler --- error handler function. in our case, onerror function
 * @param saga --- actual saga function. in our case api is called and data is returned
 * @param success --- success redux action dispatch function -- in our case, if we need to pass response coming from api to the actual calling function( something like props.viewingitem(data)), then pass it here, otherwise leave it blank
 * @
 */

export const safe = (
  handler: any = null,
  saga: any,
  success: any = null,
  ...args: any
) =>
  function* (action: any) {
    try {
      console.log('action in safe===', action, success);
      const res1 = yield call(saga, ...args, action);
      // success wrapper. if you pass onsuccess method, then only this part will be executed. if you do not want the values to be returned from redux-saga to your component function call, then i suggest you skip it.
      if (success) {
        yield call(success, res1, action.type, action.meta);
        return res1; //this line returns value to the component function( to step 1)
      }
    } catch (err) {
      yield call(handler, ...args, err, action.type, action.meta);
    }
  };

export function* onerror(err: any, type: any, meta: any) {
  console.log('type onerror', type);
  yield put({
    type: type + '_error',
    payload: err,
    error: true,
    meta,
  });
  
  // do something with the error msg. like show alert, etc...
  return err;
}

export function* onsuccess(response: any, type: any, meta: any) {
  console.log('type onerror', response);
  yield put({
    type: type + '_success',
    payload: response,
    error: false,
    meta,
  });
  // do something with the success msg. like show alert, etc...
  return response;
}

you can find detailed information over here. https://medium.com/@dhavaljavia.p/redux-saga-return-values-from-saga-to-your-component-using-redux-saga-thunk-17ad6e9e81ef


Related Query

More Query from same tag