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

由于我对React和Redux传奇还不熟悉，所以在点击按钮时，我遇到了一个将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;

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);

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;
    });
}

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;

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

reducer.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;

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);

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;
    });
}

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;

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

action.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;

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);

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;
    });
}

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;

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

---

只要用行动传递它就行了。要更改的部件：
行动

导出函数getData（ID）{
返回{type:“请求的数据”，有效负载：{ID}；
}

传奇

函数*workerSaga（动作）{
试一试{
const payload=yield调用（getData，action.payload.ID）；
产量输出（{类型：“数据加载”，有效载荷}）；
}捕获（e）{
产量投入（{类型：“API_出错”，有效载荷：e}）；
}

获取数据

导出函数getData（输入\u id）{
返回轴
.get（global.baseURL，{ID:input_ID}）
。然后（响应=>{
日志（“响应数据：”，响应数据）；
返回响应数据；
})
.catch（错误=>{
console.log(
“123-----------------要解决的网络错误----------------”
);
返回误差；
});
}

您可能需要更改更多内容以获得完全工作的代码，但这是实现所需的一般方法