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-它不显式返回任何东西。因此，还原器将接收undefined作为其action参数。然后开关将运行其默认情况。

您的getoperations操作应转换为thunk。这里有一个例子：

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

errorAction和successAction函数将从异步请求接收数据，并创建要调度的action对象。

• 还原-修改文档