reactjs - 如何在传奇中触发提取调用？

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

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

如何触发传奇调用提取？
Codepen

最佳答案

这是按预期工作的项目：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>
);