如何触发saga中的fetch调用？

Question

我创建了我的第一个传奇，不知何故它没有被触发：

function* getData() {
  console.log("getData");
  const json = yield fetch("https://jsonplaceholder.typicode.com/users").then(
    response => response.json()
  );
  yield put({ type: "RECEIVED_DATA", json: json.data });
}

export default function* rootSaga() {
  console.log("rootSaga call");
  yield takeEvery("GET_DATA", getData);
}

如何触发传奇来调用提取？ 代码笔

Answer 1

这是按预期工作的项目：https ://codesandbox.io/s/8l8l59wwp9

我刚刚修好了。详细说明将很快发布。

首先，由于某种原因，我不知道为什么console.log()方法在您的项目中不起作用，您可以改用alert()方法。

其次，你的getDate()生成器函数应该是这样的：

function* getData() {
  console.log("getData");
  const json = yield call(() =>
    fetch("https://jsonplaceholder.typicode.com/users")
      .then(response => response.json())
      .then(myJson => myJson)
  );
  yield put({ type: "RECEIVED_DATA", json: json });
}

第三，在你的减速器中，我们应该获取json属性的值而不是data操作对象的属性。

...
case "RECEIVED_DATA":
  return action.json;
...

最后，我对您的代码进行了一些更改以显示结果：

// index.js

function render() {
  ReactDOM.render(
    <Users data={store.getState()} getData={() => action("GET_DATA")} />,
    document.getElementById("root")
  );
}

// and

// Users.js

const Users = ({ data, getData }) => (
  <div>
    hi from users
    <button onClick={() => getData()}>Get data</button>
    <ul>{data.map(user => <li key={user.id}>{user.name}</li>)}</ul>
  </div>
);