title: How to Pass an ID to API call using redux saga?
body: <p>As I am new to React and Redux-Saga, I was facing a problem with passing ID from listing page to detail page onClick of button. Here, I wanted to dispatch the ID and pass it to the Api-saga and fetch the data of that ID.
  Just help me to pass the value of id to api call through saga.</p>
  
  <p>I have writtern the code like this, which might not be correct.</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import Details from "../src/js/components/details";
  import Post from "../src/js/components/post";
  import "bootstrap/dist/css/bootstrap.min.css";
  import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";
  const App = () =&gt; (
    &lt;&gt;
      &lt;Router&gt;
        &lt;Switch&gt;
          &lt;Route exact path="/" component={Post} /&gt;
          &lt;Route path="/details/:id" render={props =&gt; &lt;Details {...props} /&gt;} /&gt;
        &lt;/Switch&gt;
      &lt;/Router&gt;
    &lt;/&gt;
  );
  export default App;
  </code></pre>
  
  <p><strong><em>post.js</em></strong></p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import { Link, Router, Route, Redirect } from "react-router-dom";
  import { Button, Table } from "reactstrap";
  import { getData } from "../actions/index";
  export class Post extends Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
  
    componentDidMount() {
      this.props.getData();
    }
  
    render() {
      console.log("Datas are:", this.props.lists);
  
      return (
        &lt;&gt;
          &lt;Table striped bordered hover&gt;
            &lt;tr&gt;
              &lt;th&gt;ID&lt;/th&gt;
              &lt;th&gt;Title&lt;/th&gt;
              &lt;th&gt;Body&lt;/th&gt;
              &lt;th&gt;Action&lt;/th&gt;
            &lt;/tr&gt;
            {this.props.lists.map(e =&gt; (
              &lt;tr&gt;
                &lt;td&gt;{e.id}&lt;/td&gt;
                &lt;td&gt;{e.title}&lt;/td&gt;
                &lt;td&gt;{e.body}&lt;/td&gt;
                &lt;td&gt;
                  &lt;Link
                    to={{
                      pathname: `details/${e.id}`
                    }}
                  &gt;
                    Details
                  &lt;/Link&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            ))}
          &lt;/Table&gt;
        &lt;/&gt;
      );
    }
  }
  function mapStateToProps(state) {
    return {
      detailData: state.detailData
    };
  }
  export default connect(mapStateToProps, { getData })(Post);
  </code></pre>
  
  <p><strong>detail.js</strong></p>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import { getDataDetail } from "../actions/index";
  
  import { Table, Button } from "reactstrap";
  
  class Details extends Component {
    constructor(props) {
      super(props);
      this.state = {};
    }
    componentDidMount(p) {
      this.props.getDataDetail();
    }
    render() {
      const {
        match: { params }
      } = this.props;
      const { id } = params;
      console.log("Job Id:", id);
      return (
        &lt;div&gt;
          &lt;Table&gt;
            &lt;tr&gt;
              &lt;th&gt;Job Id&lt;/th&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
              &lt;td&gt;{id}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/Table&gt;
        &lt;/div&gt;
      );
    }
  }
  
  const mapDispachToProps = dispatch =&gt; {
    return {
      userId: () =&gt; dispatch({ type: "LOADED_DATA_DETAIL", value: {id} })
    };
  };
  export default connect(mapDispachToProps, { getDataDetail })(Details);
  </code></pre>
  
  <p><strong>saga.js</strong></p>
  
  <pre><code>import { takeEvery, call, put } from "redux-saga/effects";
  import axios from "axios";
  
  global.baseURL = "https://jsonplaceholder.typicode.com/posts";
  
  export default function* watcherSaga() {
    yield takeEvery("DATA_REQUESTED", workerSaga);
    yield takeEvery("LOADED_DATA_DETAIL", workerSagaDetail);
  }
  
  function* workerSaga() {
    try {
      const payload = yield call(getData);
      yield put({ type: "DATA_LOADED", payload });
    } catch (e) {
      yield put({ type: "API_ERRORED", payload: e });
    }
  }
  function* workerSagaDetail(value) {
    const payload = yield call(getDataDetail, value);
  
    yield put({ type: "DATA_LOADED1", payload });
  }
  
  export function getData() {
    return axios
      .get(global.baseURL)
      .then(response =&gt; {
        console.log("Response data:", response.data);
        return response.data;
      })
      .catch(error =&gt; {
        console.log(
          "123-------------Network error to be solved--------------------"
        );
        return error;
      });
  }
  export function getDataDetail(value) {
    return axios
      .get(global.baseURL + "/" + value)
      .then(response =&gt; {
        console.log("Response data detail:", response.data);
        return response.data;
      })
      .catch(error =&gt; {
        console.log(
          "123-------------Network error to be solved--------------------"
        );
        return error;
      });
  }
  </code></pre>
  
  <p><strong>reducer.js</strong></p>
  
  <pre><code>const initialState = {
    listData: [],
    detailData: []
  };
  function rootReducer(state = initialState, action) {
    switch (action.type) {
      case "DATA_LOADED": {
        return Object.assign({}, state, {
          listData: state.listData.concat(action.payload)
        });
      }
      case "LOADED_DATA_DETAIL": {
        return Object.assign({}, state, {
          detailData: state.detailData.concat(action.payload)
        });
      }
    }
    return state;
  }
  export default rootReducer;
  </code></pre>
  
  <p><strong>action.js</strong></p>
  
  <pre><code>export function getData(payload) {
    return { type: "DATA_REQUESTED", payload };
  }
  export function getDataDetail(value) {
    return { type: "LOADED_DATA_DETAIL", payload: { value } };
  }
  </code></pre>