Thunk / Axe ios Отправка Ничего не Делая - PullRequest
Новая
       5

Thunk / Axe ios Отправка Ничего не Делая

0 голосов
/ 06 марта 2020

Я создал создатель действий, который просто должен сделать запрос get в мой API и вернуться со списком всех проектов. Однако по какой-то причине моя обратная отправка в функции thunk вообще не запускается. Он попадает в оператор console.log () и просто заканчивается. Насколько я могу судить, нет ошибок консолей и сетевых вызовов. Любые идеи, почему это не будет делать абсолютно ничего?

Панель инструментов. js (компонент) 

import ProjectItem from "../Project/ProjectItem";
import styles from "./Dashboard.module.css";
import CreateProjectButton from "../CreateProjectButton/CreateProjectButton";
import { connect } from "react-redux";
import { getProjects } from "../../Redux/getProjects/actions";

const Dashboard = props => {
  useEffect(() => {
    console.log("blah");
    getProjects();
  }, []);

  return (
    <div className={styles.dashboardContainer}>
      <h1>Projects</h1>
      <br />
      <CreateProjectButton />
      <br />
      <hr />
      <ProjectItem />
    </div>
  );
};

const mapStateToProps = state => {
  return {
    projects: state
  };
};

const mapDispatchToProps = dispatch => {
  return {
    getProjects: () => dispatch(getProjects())
  };
};

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

action. js (создатель действий) 

import { GET_PROJECTS_SUCCESS, GET_PROJECTS_ERROR } from "./constants";

export const getProjectsSuccess = payload => {
  console.log("getProjectSuccess", payload);
  return {
    type: GET_PROJECTS_SUCCESS,
    payload
  };
};

export const getProjectsError = () => {
  console.log("there was an error");
  return {
    type: GET_PROJECTS_ERROR
  };
};

export function getProjects() {
  console.log("getProject");
  return dispatch => {
    axios
      .get("/project/all")
      .then(res => dispatch(getProjectsSuccess(res.data)))
      .catch(err => dispatch(getProjectsError(err)));
  };
}

index. js (редуктор getProject) 


const initialState = {
  projects: [], //array of projects
  project: {}, // single project for update case
  reRender: false
};

const getProjectsReducer = (state = initialState, action) => {
  switch (action.type) {
    case GET_PROJECTS_SUCCESS:
      return { ...state, projects: action.payload }; // will need to change action.payload later on
    default:
      return state;
  }
};

export default getProjectsReducer;

константы. js

export const GET_PROJECTS_SUCCESS = "GET_PROJECTS_SUCCESS";
export const GET_PROJECTS_ERROR = "GET_PROJECTS_ERROR";

rootReducer. js

import createProjectReducer from "./createProject/index";
import getProjectsReducer from "./getProjects/index";

const rootReducer = (state = {}, action) => {
  return {
    project: createProjectReducer(state.project, action),
    projects: getProjectsReducer(state.projects, action)
  };
};

export default rootReducer;

1 Ответ

0 голосов
/ 09 марта 2020

ИСПРАВЛЕНО: После прочтения хука эффекта использования в функциональных компонентах я понял, что мне не хватает props.getProjects в функции useEffect на панели инструментов. js!

...