如何使用redux saga将ID传递给API调用？

Question

由于我是React和Redux-Saga的新手，因此在单击按钮时将ID从列表页面传递到详细信息页面时，我遇到了一个问题。在这里，我想分发ID并将其传递给Api-saga，并获取该ID的数据。只需帮助我通过saga将id的值传递给api调用即可。

我写了这样的代码，可能不正确。

App.js

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 = () => (
  <>
    <Router>
      <Switch>
        <Route exact path="/" component={Post} />
        <Route path="/details/:id" render={props => <Details {...props} />} />
      </Switch>
    </Router>
  </>
);
export default App;

post.js

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 (
      <>
        <Table striped bordered hover>
          <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Body</th>
            <th>Action</th>
          </tr>
          {this.props.lists.map(e => (
            <tr>
              <td>{e.id}</td>
              <td>{e.title}</td>
              <td>{e.body}</td>
              <td>
                <Link
                  to={{
                    pathname: `details/${e.id}`
                  }}
                >
                  Details
                </Link>
              </td>
            </tr>
          ))}
        </Table>
      </>
    );
  }
}
function mapStateToProps(state) {
  return {
    detailData: state.detailData
  };
}
export default connect(mapStateToProps, { getData })(Post);

detail.js

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 (
      <div>
        <Table>
          <tr>
            <th>Job Id</th>
          </tr>
          <tr>
            <td>{id}</td>
          </tr>
        </Table>
      </div>
    );
  }
}

const mapDispachToProps = dispatch => {
  return {
    userId: () => dispatch({ type: "LOADED_DATA_DETAIL", value: {id} })
  };
};
export default connect(mapDispachToProps, { getDataDetail })(Details);

saga.js

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 => {
      console.log("Response data:", response.data);
      return response.data;
    })
    .catch(error => {
      console.log(
        "123-------------Network error to be solved--------------------"
      );
      return error;
    });
}
export function getDataDetail(value) {
  return axios
    .get(global.baseURL + "/" + value)
    .then(response => {
      console.log("Response data detail:", response.data);
      return response.data;
    })
    .catch(error => {
      console.log(
        "123-------------Network error to be solved--------------------"
      );
      return error;
    });
}

reducer.js

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;

action.js

export function getData(payload) {
  return { type: "DATA_REQUESTED", payload };
}
export function getDataDetail(value) {
  return { type: "LOADED_DATA_DETAIL", payload: { value } };
}

Answer 1

只需通过操作即可通过。要更改的零件：动作

export function getData(ID) {
  return { type: "DATA_REQUESTED", payload:{ID} };
}

saga

function* workerSaga(action) {
  try {
    const payload = yield call(getData,action.payload.ID);
    yield put({ type: "DATA_LOADED", payload });
  } catch (e) {
    yield put({ type: "API_ERRORED", payload: e });
  }

getData

export function getData(input_id) {
  return axios
    .get(global.baseURL,{ID:input_id})
    .then(response => {
      console.log("Response data:", response.data);
      return response.data;
    })
    .catch(error => {
      console.log(
        "123-------------Network error to be solved--------------------"
      );
      return error;
    });
}

您可能需要更改一些内容才能获得完整的代码，但这是实现所需功能的一般方法。