Действие отправлено, но состояние не обновляется

Question

Я новичок в редуксе, и я прочитал другие вопросы, касающиеся этой темы c. Я пытался и искал довольно долго в этой точке. Я использую инструменты Redux Dev в и chrome и могу видеть, как мои действия извлекают нужную мне информацию, но она не передается штату. Вот часть моего кода, любая помощь будет принята с благодарностью.

действия. js

export const FETCH_DATA = {
  FETCH_DATA_BEGIN: "FETCH_DATA_BEGIN",
  FETCH_DATA_SUCCESS: "FETCH_DATA_SUCCESS",
  FETCH_DATA_FAILURE: "FETCH_DATA_FAILURE",
};

export const fetchDataBegin = () => ({
  type: FETCH_DATA.FETCH_DATA_BEGIN,
});

export const fetchDataSuccess = (data) => ({
  type: FETCH_DATA.FETCH_DATA_SUCCESS,
  payload: data,
});

Редукторы. js

import { FETCH_DATA } from "./actions";

const initialState = {
  data: [],
  loading: false,
  error: null,
};

export default function displayDataReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_DATA.FETCH_DATA_BEGIN:
      return {
        ...state,
        loading: true,
        error: null,
      };
    //Sets the data
    case FETCH_DATA.FETCH_DATA_SUCCESS:
      return {
        ...state,
        loading: false,
        data: action.payload.data,
      };

мой магазин /index.js

import { createStore, combineReducers, applyMiddleware, compose } from "redux";
import thunk from "redux-thunk";

import displayDataReducer from "./displayData/reducer";

// The Dev Tool extension for the browser
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

// export const RootReducer = combineReducers({
//   data: displayDataReducer,
// });

export default createStore(
  displayDataReducer,
  composeEnhancers(applyMiddleware(thunk))
);

мой компонент

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import axios from "axios";

import Navbar from "../brand/Navbar";
import Masthead from "../brand/Masthead";
import Footer from "../brand/Footer";
import MainContent from "../content/MainContent";

function App() {
  const content = useSelector((state) => state);
  const dispatch = useDispatch();

  function getData() {
    return (dispatch) => {
      axios.get("https://jsonplaceholder.typicode.com/todos/1").then((res) =>
        dispatch({
          type: "FETCH_DATA.FETCH_DATA_SUCCESS",
          data: res.data,
        })
      );
    };
  }
  useEffect(() => {
    dispatch(getData());
  }, []);

Answer 1

Проблема: type: "FETCH_DATA.FETCH_DATA_SUCCESS" должно быть просто type: "FETCH_DATA_SUCCESS", или, возможно, вы не хотели включать в него кавычки, в этом случае вам также необходимо импортировать FETCH_DATA.

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import axios from "axios";

import Navbar from "../brand/Navbar";
import Masthead from "../brand/Masthead";
import Footer from "../brand/Footer";
import MainContent from "../content/MainContent";

function App() {
  const content = useSelector((state) => state);
  const dispatch = useDispatch();

  function getData() {
    return (dispatch) => {
      axios.get("https://jsonplaceholder.typicode.com/todos/1").then((res) =>
        dispatch({
          type: "FETCH_DATA_SUCCESS", // <-- Drop the prefix
          data: res.data,
        })
      );
    };
  }

ИЛИ

import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import axios from "axios";

import { FETCH_DATA } from "./actions"; // <-- import actions

import Navbar from "../brand/Navbar";
import Masthead from "../brand/Masthead";
import Footer from "../brand/Footer";
import MainContent from "../content/MainContent";

function App() {
  const content = useSelector((state) => state);
  const dispatch = useDispatch();

  function getData() {
    return (dispatch) => {
      axios.get("https://jsonplaceholder.typicode.com/todos/1").then((res) =>
        dispatch({
          type: FETCH_DATA.FETCH_DATA_SUCCESS,
          data: res.data,
        })
      );
    };
  }