使用react / redux-thunk读取api后加载系列数据的问题

Question

问题

你好朋友，

我正在使用react + redux开发一个应用程序，我遇到的问题是来自于的series属性

const mapStateToProps = (state) => {
   return {
     series: state.serieReducer
   }
}

显示控制台中未定义的图像，但是如果您在操作中看到该图像，它将在数组中加载30个数据。

我希望您能帮助我解决问题并能够将数据加载到render（）{}函数中。

src / components / Home / index.js

import React, {Component} from 'react';
import Page from './page.js';
import fetchSeriesAction from '../../redux/actions/series/action.fetch.js';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux'


class Home extends Component {
  componentDidMount() {
    this.props.fetchSeries();
  }

  render(){

    console.log('TESTING SERIES LIST:', this.props) // show undefined

    return(
      <Page/>
    )
  }
}

const mapStateToProps = (state) =>{
  return{
    series: state.serieReducer
  }
}

const mapDispatchToProps = dispatch => bindActionCreators({
  fetchSeries: fetchSeriesAction
}, dispatch)


export default connect(mapStateToProps , mapDispatchToProps)(Home);

src / redux / actions / series

serie / action.error.js

import {FETCH_SERIES_ERROR} from '../../types.js';

const fetchSeriesError = (error) =>{
  return {
    type: FETCH_SERIES_ERROR,
    error: error
  }
}


export default fetchSeriesError;

series / action.pending.js

import {FETCH_SERIES_PENDING} from '../../types.js';

const fetchSeriesPending = () =>{
  return {
    type: FETCH_SERIES_PENDING
  }
}

export default fetchSeriesPending;

series / action.success.js

import {FETCH_SERIES_SUCCESS} from '../../types.js';

const fetchSeriesSuccess = (series) =>{
  return {
    type: FETCH_SERIES_SUCCESS,
    series: series
  }
}

export default fetchSeriesSuccess;

series / action.fetch.js

import fetchSeriesPending from './action.pending.js';
import fetchSeriesSuccess from './action.sucess.js';
import fetchSeriesError from './action.error.js';


const fetchData = () =>{
  return async dispatch => {
    dispatch(fetchSeriesPending());
    await fetch('https://cinemanight.chrismichael.now.sh/api/v1/series/1')
      .then(res => res.json())
      .then(res => {
        if(res.error) {
            throw(res.error);
        }
        dispatch(fetchSeriesSuccess(res.series));
        return res.series;
      })
      .catch(error => {
        dispatch(fetchSeriesError(error));
      })
  }
}

export default fetchData;

减速器/系列

series / result.js

import { 
  FETCH_SERIES_ERROR,
  FETCH_SERIES_PENDING,
  FETCH_SERIES_SUCCESS
} from '../../types.js';

const defaultState = {
  pending: true,
  series: [],
  error: null
}

const reducer = (state = defaultState, action) =>{
  switch(action.type){
    case FETCH_SERIES_PENDING:
      return{
        ... state,
        pending: true
      }
    case FETCH_SERIES_SUCCESS:
      return{
        ... state,
        pending: false,
        series: action.payload
      }
    case FETCH_SERIES_ERROR:
      return{
        ... state,
        pending: false,
        error: action.error
      }

    default:
      return state;
  }
}

export default reducer;

series / index.js

import resultReducer from './result.js';

export default {
  resultReducer
}

store.js

import {createStore , combineReducers , applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import SeriesReducer from './reducers/series/index.js';

const middlewares  = [thunk , logger];

const reducers = combineReducers({
  ... SeriesReducer
});

const store = createStore(reducers , applyMiddleware(... middlewares));

export default store;

Answer 1

您需要修复action.success.js或您的reducer，因为在reducer中，您正在设置action.payload，并且从action.success.js中发送了series。>

将您的action.success.js都更改为：