React-Redux |调度员不工作

Question

我有这些文件，不知怎的，当我发送东西时，它总是返回reducer的默认情况。

这是我第一次使用redux / 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}
            }
        }
    }

和我的商店：

从'redux'

导入{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 - 它不会显式返回任何内容。因此，您的reducer将收到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