Home>

react + redux + typescriptI am making a todo app.
Current,actionsoaxiosUse to get information from an external API and use itreducerI am implementing to pass it toactionsodipatchWhen you do"Dispatch is a not function"ThaterrorCame out.
Also, when the reducer action is output by console.log (), the following type is returned.

I tried various things, but I couldn't find the cause. I would appreciate it if someone could teach me.

Uncaught (in promise) TypeError: dispatch is not a function
    at index.tsx: 32<= action/index.tsx (dispatch ({type: READ_EVENTS, response}))
    at Generator.next ()
    at fulfilled (tiny-warning.esm.js: 20)
Corresponding source code

action/index.tsx

import axios from "axios";
import {stub} from "./test.stub";
export const READ_EVENTS = "READ_EVENTS";

const ROOT_URL = "https://udemy-utils.herokuapp.com/api/v1";
const QUERYSTRING = "? token = token123";
export async function readEvents (dispatch: any) {
  const response = await axios.get (`${ROOT_URL}/events ${QUERYSTRING}`);
  dispatch ({type:'READ_EVENTS', response});
}

reducer/event.tsx

import {READ_EVENTS} from "../actions/index"
export default (events = {}, action: any) =>{
  switch (action.type) {
    case READ_EVENTS:
      console.log (action)
      return action
    default: default:
      return events
  }
}

component/index.tsx

import React, {Component} from "react";
import {Button, ButtonGroup, Breadcrumb, Row, Col} from "react-bootstrap";
import {Link} from "react-router-dom";
import {readEvents} from "../actions/index";
import {connect} from "react-redux";
class Task extends Component {
  componentDidMount () {
    readEvents (this.state);
    console.log (readEvents (this.state));
  }
  render () {
    console.log (this.props)
    return (
      
      <Row className = "justify-content-md-center">
        <Col xs lg = "2">
          <Breadcrumb>
            <ButtonGroup vertical>
              <Button variant = "outline-warning">
                <Link to = "/ task /: id">Edit</Link>
              </Button>{" "}
              <Button variant = "outline-warning">
                <Link to = "/ task /: id">Delete</Link>
              </Button>{" "}
            </ButtonGroup>
          </Breadcrumb>
        </Col>
        <Col md = "auto">
          <Breadcrumb>Date</Breadcrumb>
        </Col>
        <Col>
          <Breadcrumb>
               
          </Breadcrumb>
        </Col>
      </Row>
      
    );
  }
}
const mapStateToProps = (state: any) =>({events: state.events})
const mapDispatchToProps = {readEvents};
export default connect (mapStateToProps, mapDispatchToProps) (Task);

store

import React from "react"
import {Provider} from "react-redux"
import {createStore, applyMiddleware} from "redux"
import ReactDOM from "react-dom"
import {BrowserRouter, Route, Switch} from "react-router-dom"
import Main from "./components/main"
import reducer from "./reducer"
import {composeWithDevTools} from "redux-devtools-extension"
import thunk from "redux-thunk"
const store = createStore (reducer, applyMiddleware (thunk))
ReactDOM.render (
<Provider store = {store}>
  <BrowserRouter>
    <Switch>
      <Route path = "/ task" component = {Main} />
        {/ *<Route path ='/ task /: id' component = {Main} />
  <Route path ='/ task /: id' component = {Main} />* /}
    </Switch>
  </BrowserRouter>
</Provider>,
  document.getElementById ("root")
)
  • Answer # 1

    connect connectThe second argument ofdispatchMust be a function that takes and returns a function.
    About Redux connect-Qiita
    So in this case

    const mapDispatchToProps = (dispatch) =>{readEvents (dispatch)};


    It would be good to say.

    Postscript:

    readEvents (this.state);


    I get an error because I am calling. If heredispatchIf you want

    const mapDispatchToProps = (dispatch) =>{{readEvents: readEvents (dispatch)}};


    age,

    this.props.readEvents (this.state)


    It should be (Redux is ambiguous because it's been a while).