反应-Redux |调度员不工作

Posted 2023-02-19

【中文标题】反应-Redux |调度员不工作

【英文标题】：React-Redux | Dispatcher not working

【发布时间】：2018-01-26 00:46:26

【问题描述】：

我有这些文件，不知何故，当我发送某些东西时，它总是返回减速器的默认情况。

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

【问题讨论】：

什么不完全有效？如果可以，请尝试突出显示问题。屏幕上没有任何显示吗？您是否尝试使用 console.log() 记录任何值？

是的，我尝试了控制台日志记录，但问题是我的减速器总是不断返回默认案例/状态，或者我的调度程序无法正常工作......

【参考方案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

【讨论】：

是的，我之前尝试过，但我尝试将动作作为对象分派到 thunk 中，但没有奏效。现在我添加了定义为返回对象的函数的单独操作，并且我调度了这些操作，它们确实有效:)

@LaurensMäkel：? 使用对象字面量代替动作创建函数应该没有什么不同。您可以扩展您的问题以包括该尝试，我将对其进行审查。然而，无论如何都有动作创建者是一个好习惯（请参阅here 或official documentation 了解原因；tldr：模块化、DRY、可测试）。很高兴它现在可以工作了！

@Wing - ***.com/questions/68504256/… 你能帮我解决上面的问题吗？它类似于这个问题。到现在还没有人回答这个问题