使用react.js和redux從axios顯示數據

Question

因此，我目前正在學習redux，並且正在制作一個顯示文章列表的應用程序。 但是我不知道為什么我的后端數據沒有顯示出來。 我不確定我的錯誤是在哪里阻止我的后端數據顯示？ 我知道這不是redux的設置，因為我做了一個更簡單的應用程序，以查看是否是問題所在，而事實並非如此，它必須在動作，reducers和組件上做更多的事情。 當數據庫中有更多數據提供鏈接時，我想走得更遠，以便轉到另一個頁面，該頁面顯示有關該文章的所有信息。

來自我的節點后端的數據

[{"_id":"58c71df9f7e4e47f1fe17eeb","article":"words words","author":"Jason","date":"1/2/2014","title":"my article","__v":0}]

fashionActions.js

import axios from "axios";

export function fetchFashionArticle() {
    return function(dispatch) {
        axios.get("http://localhost:3000/api/fashion")
            .then((response) => {
                dispatch({type: "FETCH_FASHIONARTICLES_FULFILLED", payload: response.data})
            })
            .catch((err) => {
                dispatch({type: "FETCH_FASHIONARTICLES_REJECTED", payload: err})
            })
    }
}

export function addFashionArticle(_id, title,date, author, article) {
    return {
        type:  "ADD_FASHIONARTICLE",
        payload: {
            _id,
            title,
            date,
            author,
            article,
        },
    }
}

export function updateFashionArticle(_id, title,date, author, article) {
    return {
        type: "UPDATE_FASHIONARTICLE",
        payload: {
            _id,
            title,
            date,
            author,
            article,
        },
    }
}

export function deleteFashionArticle(id) {
    return {type: 'DELETE_FASHIONARTICLE', payload: id}
}

FashionArticle.js

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

import {fetchFashionArticle} from "../actions/fashionActions";

@connect((store) => {
  return {
      fashionarticles:store.fashionarticles.fashionarticles,
  };
})




export default class FashionArticle extends React.component {
    fetchFashionArticle() {
        this.props.dispatch(fetchFashionArticle())
    }

    render() {
        const { fashionarticles } = this.props;

        if(!fashionarticles.length) {
            return <button onClick={this.fetchFashionArticles.bind(this)}>Load articles</button>
        }

        const mappedArticles = fashionarticles.map(fashionarticle => <li>{fashionarticle}</li>)

        return(
            <div>
                <h1>Fashion Article</h1>
               <h2>{fashionarticles.title}</h2>
            </div>
        )
    }

}

fashionArticleReducers.js

    export default function reducer(state={
    fashionarticles: [],
    fetching: false,
    fetched: false,
    error: null,
}, action) {

    switch (action.type) {
        case "FETCH_FASHIONARTICLES": {
            return {...state, fetching: true}
        }
        case "FETCH_FASHIONARTICLES_REJECTED": {
            return {...state, fetching: false, error: action.payload}
        }
        case "FETCH_FASHIONARTICLES_FULFILLED": {
            return {
                ...state,
                fetching: false,
                fetched: true,
                fashionarticles: action.payload,
            }
        }
        case "ADD_FASHIONARTICLE": {
            return {
                ...state,
                fashionarticles: [...state.fashionarticles, action.payload],
            }
        }
        case "UPDATE_FASHIONARTICLE": {
            const { _id, title,date,author,article } = action.payload
            const newFashionArticles = [...state.fashionarticles]
            const fashionarticleToUpdate = newFashionArticles.findIndex(fashionarticle => fashionarticle.id === id)
            newFashionArticles[fashionarticleToUpdate] = action.payload;

            return {
                ...state,
                fashionarticles: newFashionArticles,
            }
        }
        case "DELETE_FASHIONARTICLE": {
            return {
                ...state,
                fashionarticles: state.fashionarticles.filter(fashionarticle => fashionarticle.id !== action.payload),
            }
        }
    }

    return state
}

index.js

import { combineReducers } from 'redux';

import user from './testReducers'
import fashionarticles from './fashionArticleReducers';


export default combineReducers({
    user,
    fashionarticles,
})

Answer 1

您正在發送帶有axios響應的有效負載，類型為FETCH_FASHIONARTICLES_DONE但是減速器正在監聽FETCH_FASHIONARTICLES_FULFILLED