Почему не работает асинхронный action в React Redux?

Почему не работает асинхронный action в React Redux?

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

actions/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;

workersR.js

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

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

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

export default workersR;

rootR.js

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

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

export default rootR;

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

БУДУ БЛАГОДАРНА ЗА ЛЮБУЮ ПОМОЩЬ


Ответы (0 шт):