React-Redux |調度員不工作

Question

我有這些文件，當我派遣的東西時，總是返回reducer的默認情況。

這是我第一次使用終極版/ thunk的，而我下面這個教程：https://www.youtube.com/watch?v=nrg7zhgJd4w當他這樣做，它的工作原理..

請看看我的代碼：

反應成分：

import React, { Component } from 'react'; 
import './App.css'; 
import Request from 'request'; 
import { connect } from 'react-redux' 

import * as OperationsActions from './actions/operationsReducerActions' 

//import { Content, FilterSelect, ListItem, Searchbar, Sidebar} from './components/index.js' 

function mapStateToProps(state){ 
    return { 
    operations : state.operations 
    } 
} 

class App extends Component { 
    constructor(props){ 
    super(props); 
    } 
    componentDidMount(){ 
    this.props.dispatch(OperationsActions.getOperations()); 
    } 
    render() { 
    console.log(this.props) 
    return(
     <div>{this.props.operations.operations[0].text}</div> 
    ) 
    } 
} 

export default connect(mapStateToProps)(App) 

行動文件：

import Request from 'request'; 

export function getOperations(){ 
     Request('http://localhost:8000/client/REQUEST_OPERATIONS', (error, response, data) => { 
      if(!error){ 
       return {type : 'FETCH_OPERATIONS_SUCCES', payload : data}; 
      } 
      else { 
       return {type : 'FETCH_OPERATIONS_REJECTED', payload : error} 
      } 
    }); 
} 

減速機：

export default function reducer(state={ 
     operations : [{ 
      text : '', 
      reqArgument : '', 
      filters : [], 
      url : '' 
     }], 
     fetching : false, 
     fetched : false, 
     error : null 
    }, action) { 

     switch(action.type){ 
      case 'FETCH_OPERATIONS':{ 
       return {...state, fetching : true } 
      } 
      case 'FETCH_OPERATIONS_REJECTED':{ 
       return {...state, fetching : false, error : action.payload} 
      } 
      case 'FETCH_OPERATIONS_SUCCES':{ 
       return {...state, fetched : true, fetching : false, operations : action.payload } 
      } 
      default : { 
       return {...state} 
      } 
     } 
    } 

和我的商店：

進口{applyMiddleware，createStore}從 '終極版'

import logger from 'redux-logger' 
    import thunk from 'redux-thunk' 
    import promise from 'redux-promise-middleware' 

    import reducer from './reducers' 

    const middleware = applyMiddleware(promise, thunk, logger) 

    export default createStore(reducer, middleware) 

Answer 1

問題

class App extends Component { 
    ... 
    componentDidMount(){ 
    this.props.dispatch(OperationsActions.getOperations()); 
    } 
    ... 
} 

調用OperationsActions.getOperations()將返回undefined - 它不沒有明確地返回任何東西。因此，您的減速器將收到undefined作爲其action參數。然後switch將運行其默認情況。

解決方案

你getOperations行動應轉換爲一個thunk。下面是一個例子：

function getOperationsThunk() { 
    return function (dispatch) { 
    Request('http://foo.bar', (err, data) => { 
     if (err) { dispatch(errorAction(err)); } 
     else { dispatch(successAction(data)); } 
    }); 
    }; 
} 

的errorAction和successAction功能將來自異步請求接收的數據，並創建操作對象要被分派。

延伸閱讀

• redux-thunk documentation