Как вызвать вызов 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);
}

Как я могу вызвать сагу для вызова fetch? Codepen

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