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

Question

问题

朋友们好，

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

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 或您的减速器，因为在减速器中您正在设置 action.payload 并且您正在从您的 action.success.js 发送 series

要么将你的 action.success.js 更改为：

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

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

export default fetchSeriesSuccess;

或者像这样改变你的减速器：

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.series
      }
    case FETCH_SERIES_ERROR:
      return{
        ... state,
        pending: false,
        error: action.error
      }

    default:
      return state;
  }
}

export default reducer;

同时更新您的 mapStateToProps 方法：

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