获取时不要获取数据

Question

我有一个使用redux的应用程序
我也曾在本地获取数据。

return fetch("https://dog.ceo/api/breeds/image/random").then(res => res.json());

在我的反应组件中，我使用useSelector来获取数据。但我什么也没得到。

 useEffect(() => {
    console.log(selector.data); // here i should get data
  }, []);

如何在我的组件中获取数据？

演示：https://codesandbox.io/s/nervous-rosalind-lp16j?file=/src/App.js：242-328

Answer 1

我能够将数据提取到您的应用程序组件中。我必须做一点重构才能做到这一点。

1. 将存储移动到您的索引。js文件

//index.js
import React from "react";
import ReactDOM from "react-dom";
import createSagaMiddleware from "redux-saga";
import { createStore, applyMiddleware } from "redux";
import reducer from "./saga/reducers";
import rootSaga from "./saga/saga";
import { Provider } from "react-redux";
import App from "./App";

const sagaMiddleware = createSagaMiddleware();

const store = createStore(reducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(rootSaga);

const rootElement = document.getElementById("root");
ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
      <App />
    </React.StrictMode>
  </Provider>,
  rootElement
);

//sagas/actions.js
export const fetchDogs = () => ({
  type: "FETCH_DOGS"
});

//sagas/reducers.js
const reducer = (state = {}, action) => {
  switch (action.type) {
    case "FETCH_DOGS":
      return { ...state, loading: true };

    case "DOGS_RECIEVED":
      return { ...state, dogs: action.data, loading: false };

    default:
      return state;
  }
};

export default reducer;

//sagas/saga.js
import { put, takeLatest, all } from "redux-saga/effects";

function* actionWatcher() {
  yield takeLatest("FETCH_DOGS", fetchDataAsync);
}
function* fetchDataAsync() {
  try {
    const json = yield fetch("https://dog.ceo/api/breeds/image/random").then(
      response => response.json()
    );
    console.log(json);
    yield put({ type: "DOGS_RECIEVED", data: json.message });
  } catch (error) {
    console.log(error);
  }
}

export default function* rootSaga() {
  yield all([actionWatcher()]);
}

//App.js
import React, { useEffect } from "react";
import "./styles.css";
import { fetchDogs } from "./saga/actions";
import { useDispatch, useSelector } from "react-redux";

export default function App() {
  const dogs = useSelector(state => state.dogs);
  const loading = useSelector(state => state.loading);

  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(fetchDogs());
  }, []);

  if (loading) {
    return "Loading...";
  }

  console.log(dogs);

  return (
    <div className="App">
      <h1>Dogs</h1>
      <img src={dogs} alt="new" />
    </div>
  );
}

这里有一个指向沙盒的链接。