來自異步動作的反應重新顯示數據

Question

我正在構建一個反應應用程序併爲數據實現redux。當我導航到特定的路由時，我想分配操作從外部API獲取數據，然後一旦數據返回，就會顯示用戶的數據。

商店：

import { createStore, applyMiddleware } from 'redux'; 
import thunkMiddleware from 'redux-thunk'; 
import createLogger from 'redux-logger'; 
import { syncHistoryWithStore } from 'react-router-redux'; 
import { browserHistory } from 'react-router'; 

import rootReducer from '../reducers/index'; 

const initialState = { 
    marvel :{ 
    characters: [] 
    } 
}; 

const store = createStore(rootReducer, initialState, applyMiddleware(thunkMiddleware, createLogger())); 

export const history = syncHistoryWithStore(browserHistory, store); 

if (module.hot) { 
    module.hot.accept('../reducers/',() => { 
    const nextRootReducer = require('../reducers/index').default; 
    store.replaceReducer(nextRootReducer); 
    }); 
} 

export default store; 

減速機：

import * as constants from '../constants/constants'; 

const initialState = { 
    characters: [], 
    isFetching: false, 
    errorMessage: null 
}; 

const marvelReducer = (state = initialState, action) => { 
    switch (action.type) { 
    case constants.FETCH_MARVEL : 
     return Object.assign({},state,{isFetching: true}); 
    case constants.FETCH_MARVEL_SUCCESS : 
     return Object.assign({}. state,{ 
     characters: [...action.response], 
     isFetching: false 
     }); 
    case constants.FETCH_MARVEL_ERROR : 
     return Object.assign({}, state,{ 
     isFetching: false, 
     errorMessage: action.message 
     }); 
    default : 
     return state; 
    } 
}; 

export default marvelReducer; 

操作：

import 'whatwg-fetch'; 

import * as constants from '../constants/constants'; 


export const fetchMarvel = (dispatch) => { 
    const MARVEL_API = 'http://gateway.marvel.com:80/v1/public/characters?apikey=e542b1d89f93ed41b132eda89b9efb2c'; 

    dispatch({ 
    type: constants.FETCH_MARVEL 
    }); 

    return fetch(MARVEL_API).then(
    response => { 
     dispatch({ 
     type: constants.FETCH_MARVEL_SUCCESS, 
     response 
     }); 
    }, 
    error => { 
     dispatch({ 
     type: constants.FETCH_MARVEL_ERROR, 
     message: error.message || 'Something went wrong with fetchMarvel' 
     }); 
    }); 
}; 

組件：

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import { bindActionCreators } from 'redux'; 
import * as actions from '../actions/actions'; 
import '../styles/homeStyles.css'; 

class Home extends Component { 
    render() { 
    const { characters, isFetching, errorMessage } = this.props; 
    return (
     <div> 
     <h1>React Starter App</h1> 
     <h2>This is the home page</h2> 
     </div> 
    ); 
    } 
} 

function mapStateToProps(state) { 
    return { 
    characters: state.characters, 
    isFetching: state.isFetching, 
    errorMessage: state.errorMessage 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { actions: bindActionCreators(actions, dispatch) }; 
} 

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

我知道我目前沒有在應用程序的任何位置顯示道具，但首先我只是試圖讓他們填充。 我錯過了什麼步驟來調度行動，以便我可以從狀態填充道具？

Answer 1

您不在任何地方調度該操作。所以沒有任何反應
你可能想這樣做在陣營的生命週期掛鉤，例如：

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

    render() { 
    const { characters, isFetching, errorMessage } = this.props; 
    return (
     <div> 
     <h1>React Starter App</h1> 
     <h2>This is the home page</h2> 
     </div> 
    ); 
    } 
}