使用 Redux-thunk 调用操作不起作用

Posted

技术标签:

【中文标题】使用 Redux-thunk 调用操作不起作用【英文标题】:Calling action with Redux-thunk not working 【发布时间】:2020-07-11 09:40:33 【问题描述】:

我正在尝试使用 redux 和 react 来调用 api 来获取一些数据。在我的组件中调用该函数时,reducer 没有看到 action.type 并且该函数返回一个已解决的 Promise。我以前没有使用过 redux-thunk。我觉得我的代码应该可以工作,但我很难找到错误。这是代码。

索引.js

const store = createStore(rootReducer, composeWithDevTools(applyMiddleware(thunkMiddleware, devToolsEnhancer)));

ReactDOM.render(
  <Provider store=store>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </Provider>,
  document.getElementById('root')
);

动作

import axios from 'axios';

export const GET_ALL_CASES = "GET_ALL_CASES";


const getCasesSuccess = (cases) => 
    return 
        type: GET_ALL_CASES,
        cases
    
;

export const getAllCases = () => 
    return (dispatch) => 
        axios.get('https://corona.lmao.ninja/countries?sort=country')
        .then(response => 
            dispatch(getCasesSuccess(response.cases))
        )
        .catch(error => 
            throw(error)
        )
    

减速器

import  GET_ALL_CASES  from '../actions';

const initialState = 
    allCases: []


const rootReducer = (state = initialState, action) => 
    switch (action.type) 
        case GET_ALL_CASES:
            return  ...state, allCases: [...action.cases]
        default:
            return state;
    


export default rootReducer;

组件

class Second extends React.Component 
    constructor(props) 
        super(props);
        this.state =   
    

    componentDidMount = () => 
        getAllCases()
    


    render()  
        return ( 
            <div>
                this.props.data[0]
            </div>
         );
    


const mapStateToProps = (state) => (
    
      data: state.allCases
    
  )

  const mapDispatchToProps = dispatch => 
    return 
      getAllCases: () => dispatch(getAllCases())
    
  

export default connect(mapStateToProps, mapDispatchToProps)(Second);

调用该函数时,如果我将其更改为 this.props.getAllCases(),则会出现此错误。

Unhandled Rejection (Error): Expected the reducer to be a function.
▶ 5 stack frames were collapsed.
getAllCases
C:/Users/Owner/Desktop/corona-app/src/containers/second.js:33
  30 | 
  31 | const mapDispatchToProps = dispatch => 
  32 |   return 
> 33 |     getAllCases: () => dispatch(getAllCases())
     | ^  34 |   
  35 | 
  36 | 

【问题讨论】:

你试过this.props.getAllCases()吗? @AliTorki 当我将其更改为 this.props 时,我收到此错误。 Unhandled Rejection (Error): Expected the reducer to be a function. ▶ 5 stack frames were collapsed. getAllCases C:/Users/Owner/Desktop/corona-app/src/containers/second.js:33 30 | 31 | const mapDispatchToProps = dispatch =&gt; 32 | return &gt; 33 | getAllCases: () =&gt; dispatch(getAllCases()) | ^ 34 | 35 | 36 | 提供您的店铺配置代码 @AliTorki 它已经在我的 index.js 中提供了 createStore 的第二个参数是您未应用的初始状态对象。 const store = createStore(rootReducer, , composeWithDevTools(applyMiddleware(thunkMiddleware, devToolsEnhancer))); 【参考方案1】:

有不同的方法来使用 dipatchMapToProps 或它的命名方式。

但不要像我一样想太多,用最简单的吧

作为一个对象
const dispatchToProps = 
  fun1,
  enter,
  code,
  herefun2

作为函数
const mapDispatchToProps = dispatch => 
  return 
    // dispatching plain actions
    increment: () => dispatch( type: 'INCREMENT' ),
    decrement: () => dispatch( type: 'DECREMENT' ),
    reset: () => dispatch( type: 'RESET' )
  
    import React from "react";
    import connect from "react-redux";
    import getAllCases from "path-of-the-file";

    class Second extends React.Component 
        constructor(props) 
            super(props);
            this.state = 
                someState: ""
            
        

        componentDidMount () 
           const  getAllCases  this.props;

           getAllCases()
        


        render()  

          const data = this.props;

            return ( 
                <div>
                    data[0]
                </div>
             );
        
    

    const mapStateToProps = (state) => 
       return 
          data: state.allCases
        
      

      const mapDispatchToProps =  getAllCases 

    export default connect(mapStateToProps, mapDispatchToProps)(Second);
    ```

【讨论】:

以上是关于使用 Redux-thunk 调用操作不起作用的主要内容,如果未能解决你的问题,请参考以下文章

带有承诺的 Redux-thunk 不起作用

为啥 redux-thunk 在 Storybook 中不起作用?

当从其他操作调用操作时,@Check 不起作用

在 NGXS 操作中调用后尝试关闭材料小吃吧不起作用

使用 html 和 javascript 来允许是不是调用表单操作不起作用(在 php 中回显)

仅调用 Typegoose 进行保存操作时,钩子在 updateOne 上不起作用