使用react.js和redux从axios显示数据

Question

So I'm learning redux currently and I'm making an app that displays a list of articles. But I can't figured out why my data from my back end isn't showing up. I'm not sure where my error is that preventing my data from my backend from showing up? I know it not the setup of redux because I did simpler app to see if that was the problem and it wasn't so it has to do more with the action, reducers , and component. I would like to go farther eventually when there is more data in the database where it provides a link so it goes to another page that shows all the information about that article.

data from my node backend

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