Почему dispatch is not a function?

Question

[qfrontend]

Почему dispatch is not a function?
App.js

import React, { useEffect } from "react";
import { connect } from "react-redux";

import fetchWorkers from "../actions/workers/fetchWorkers";

import "./App.css";

function App() {
  useEffect(() => {
    fetchWorkers();
  });
  return <div className="App"></div>;
}

const mapStateToProps = (store) => {
  return {
    workers: store.workers,
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    fetchWorkers: () => dispatch(fetchWorkers()),
  };
};
export default connect(mapStateToProps, mapDispatchToProps)(App);

fetchWorkers.js

export const FETCH_WORKERS_REQ = "FETCH_WORKERS_REQ";
export const FETCH_WORKERS_SUCC = "FETCH_WORKERS_SUCC";

const fetchWorkers = () => {
  console.log(1); /*Здесь консоль отрабатывает*/
  return (dispatch) => {
    console.log(2); /*А вот здесь уже НЕТ*/
    dispatch({
      type: FETCH_WORKERS_REQ,
      payload: {
        wait: true,
        workers: [],
      },
    });

    setTimeout(() => {
      dispatch({
        type: FETCH_WORKERS_SUCC,
        payload: {
          wait: false,
          workers: ["Jon", "Sam", "Lina"],
        },
      });
    }, 1000);
  };
};

export default fetchWorkers;

export default fetchWorkers;

store.js

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from "redux-devtools-extension";
import reducer from "../reducers/rootR";
import thunk from "redux-thunk";

export const store = createStore(
  reducer,
  composeWithDevTools(applyMiddleware(thunk))
);

rootR.js

import { combineReducers } from "redux";
import workersR from "./workers/workersR";

const rootR = combineReducers({
  workers: workersR,
});
export default rootR;

workersR.js

import { FETCH_WORKERS_REQ } from "../../actions/workers/fetchWorkers";

const initialState = {
  wait: true,
  workers: [],
};

const workersR = (state = initialState, action) => {
  switch (action.type) {
    case FETCH_WORKERS_REQ:
      return {
        ...state,
        wait: action.payload.wait,
      };
    default:
      return state;
  }
};

export default workersR;

Answer 1

[vadimparinov]

const fetchWorkers = (url) => {
         return {
             type:FETCH_WORKERS_REQ,
             payload:{wait:true}
         }
};

Потому что вот так нужно.А лучше почитай документацию
https://redux.js.org/basics/actions

Comments

[qfrontend]

Вот так правильно?

export const FETCH_WORKERS_REQ = "FETCH_WORKERS_REQ";
export const FETCH_WORKERS_SUCC = "FETCH_WORKERS_SUCC";

const fetchWorkers = () => {
  console.log(1); /*Здесь консоль отрабатывает*/
  return (dispatch) => {
    console.log(2); /*А вот здесь уже НЕТ*/
    dispatch({
      type: FETCH_WORKERS_REQ,
      payload: {
        wait: true,
        workers: [],
      },
    });

    setTimeout(() => {
      dispatch({
        type: FETCH_WORKERS_SUCC,
        payload: {
          wait: false,
          workers: ["Jon", "Sam", "Lina"],
        },
      });
    }, 1000);
  };
};

export default fetchWorkers;

[vadimparinov]

qfrontend, Вроде должен работать, но всё равно и этот код не очень.

[qfrontend]

vadimparinov,
Скажите что в этом коде не так? Почему он не очень?
Буду очень благодарна.