Javascript 调用Redux thunk不起作用的操作

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

Index.js

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

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

减速器

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);

---

使用dipatchMapToProps或其名称有不同的方法

但不要像我那样想太多，用最简单的

• 作为对象

const dispatchToProps={
fun1，
进入，
代码，
herefun2
}

• 作为功能

const mapDispatchToProps=dispatch=>{
返回{
//派遣普通行动
增量：（）=>分派（{type:'increment'}），
减量：（）=>分派（{type:'decrement'}），
重置：（）=>分派（{type:'reset'}）
}

从“React”导入React；
从“react redux”导入{connect}；
从“文件路径”导入{getAllCases}；
类扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
某个国家：“
}
}
组件安装（）{
const{getAllCases}this.props；
getAllCases（）
}
render（）{
const{data}=this.props；
报税表（
{data[0]}
);
}
}
常量mapStateToProps=（状态）=>{
返回{
数据：state.allCases
}
}
常量mapDispatchToProps={getAllCases}
导出默认连接（mapStateToProps、mapDispatchToProps）（第二）；
```

您是否尝试过

this.props.getAllCases（）

？@AliTorki当我将其更改为this.props时，出现此错误。

未处理的拒绝（错误）：预期减速机是一个函数。▶ 5个堆栈框架被折叠。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 |

提供您的店铺配置code@AliTorki它已经在my index.js中提供了createStore的第二个参数是您没有应用的初始状态对象。

const store=createStore（rootReducer，{}，composeWithDevTools（applyMiddleware（Thunk中间件，DevToolsHancer））；

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);

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 |