Question

所以我现在正在学习redux，我正在制作一个显示文章列表的应用程序。但我无法弄清楚为什么我后端的数据没有显示出来。我不确定我的错误在哪里阻止我的后端数据出现？我知道它不是redux的设置，因为我做了更简单的应用程序，看看是否是问题而不是因为它必须对action，reducers和component做更多。当数据库中有更多数据提供链接时，我想最终走得更远，所以它会转到显示该文章所有信息的另一个页面。

来自我的节点后端的数据

[{"_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

使用react.js和redux显示来自axios的数据

1 个答案: