javascript - 如何使用react/redux调度一个action并在app.js中显示数据

Question

我不知道如何在react app.js文件中加载fetchLatestAnime操作的数据。

我的任务是显示我正在获取的端点数据。

我已经实现了 reducer 和操作的部分，您可以在下面的部分中看到。我唯一需要的就是学习如何显示数据。

App.js

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
    </div>
  );
}

export default App;

actions/types.js

export const FETCHING_ANIME_REQUEST = 'FETCHING_ANIME_REQUEST';
export const FETCHING_ANIME_SUCCESS = 'FETCHING_ANIME_SUCCESS';
export const FETCHING_ANIME_FAILURE = 'FETCHING_ANIME_FAILURE';

actions/animesActions.js

import{
  FETCHING_ANIME_FAILURE,
  FETCHING_ANIME_REQUEST, 
  FETCHING_ANIME_SUCCESS
} from './types';

import axios from 'axios';


export const fetchingAnimeRequest = () => ({
  type: FETCHING_ANIME_REQUEST
});

export const fetchingAnimeSuccess = (json) => ({
  type: FETCHING_ANIME_SUCCESS,
  payload: json
});

export const fetchingAnimeFailure = (error) => ({
  type: FETCHING_ANIME_FAILURE,
  payload: error
});

export const fetchLatestAnime = () =>{
  return async dispatch =>{
    dispatch(fetchingAnimeRequest());
    try{
      let res = await axios.get('https://animeflv.chrismichael.now.sh/api/v1/latestAnimeAdded');
      let json = await res.data;
      dispatch(fetchingAnimeSuccess(json));
    }catch(error){
      dispatch(fetchingAnimeFailure(error));
    }
  };
};

reducers/latestAnimeReducers.js

import {
  FETCHING_ANIME_FAILURE,
  FETCHING_ANIME_REQUEST,
  FETCHING_ANIME_SUCCESS
} from '../actions/types';


const initialState = {
  isFetching: false,
  errorMessage: '',
  latestAnime: []
};

const latestAnimeReducer = (state = initialState , action) =>{
  switch (action.type){
    case FETCHING_ANIME_REQUEST:
      return{
        ...state,
        isFetching: true,
      }
    case FETCHING_ANIME_FAILURE:
      return{
        ...state,
        isFetching: false,
        errorMessage: action.payload
      }
    case FETCHING_ANIME_SUCCESS:
      return{
        ...state,
        isFetching: false,
        latestAnime: action.payload
      }
    default:
      return state;
  }
};

export default latestAnimeReducer;

reducers/index.js

import latestAnimeReducers from './latestAnimeReducers'
import {combineReducers} from 'redux';

const reducers = combineReducers({
  latestAnimeReducers
});

export default reducers;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import resolvers from './redux/reducers/index';
import {createStore , applyMiddleware} from 'redux';
import {Provider} from 'react-redux';
import thunk from 'redux-thunk';

const REDUX_DEV_TOOLS = window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore);
const store = createStoreWithMiddleware(resolvers , REDUX_DEV_TOOLS)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

serviceWorker.unregister();

Answer 1

理想情况下，您的 app.js 应该是这样的。我为你创建了一个工作codesandbox here 。您最初的latestAnime状态是一个空数组，但您设置给它的 Action 有效负载是一个对象，因此请记住传递payload.anime，就像我在沙箱中所做的那样。

import React, { useEffect } from "react";
import { connect } from "react-redux";
import { fetchLatestAnime } from "./redux/actions/animesActions";
const App = props => {
  const { fetchLatestAnime, isFetching, latestAnime, errorMessage } = props;
  useEffect(() => {
    fetchLatestAnime();
  }, [fetchLatestAnime]);

  console.log(props);
  if (isFetching) {
    return <p>Loading</p>;
  }

  if (!isFetching && latestAnime.length === 0) {
    return <p>No animes to show</p>;
  }

  if (!isFetching && errorMessage.length > 0) {
    return <p>{errorMessage}</p>;
  }

  return (
    <div>
      {latestAnime.map((anime, index) => {
        return <p key={index}>{anime.title}</p>;
      })}
    </div>
  );
};

const mapState = state => {
  return {
    isFetching: state.latestAnimeReducers.isFetching,
    latestAnime: state.latestAnimeReducers.latestAnime,
    errorMessage: state.latestAnimeReducers.errorMessage
  };
};

const mapDispatch = dispatch => {
  return {
    fetchLatestAnime: () => dispatch(fetchLatestAnime())
  };
};

export default connect(
  mapState,
  mapDispatch
)(App);