React-Redux |ディスパッチャーが動作しない

Question

私はこれらのファイルを持っていて、何かをディスパッチすると、常に減速機のデフォルトのケースを返します。

これは私がReduxの/サンクを使用している、と私はこのチュートリアル以下のよ初めてです：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} 
      } 
     } 
    } 

と私の店：

'Reduxの'

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

からの輸入{applyMiddleware、CREATESTORE}問題

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

OperationsActions.getOperations()がundefinedを返します呼び出す - それはdoesnの明示的に何も返さない。結果として、減速機はaction引数としてundefinedを受信します。 switchはデフォルトのケースを実行します。

ソリューション

あなたgetOperationsアクションは、サンクに変換する必要があります。ここでの例である：

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