Question

所以我来自一个角度背景，通常我会使用ng-repeat来让我的数据显示在我的页面上，但我不确定确切的方法，以便在我的网页上显示使用react.js和redux。我知道动作和减速器正在工作，这不是问题。我只是想知道如何调用数据以便放入组件。

测试数据

[{"_id":"58c71df9f7e4e47f1fe17eeb","article":"words words","author":"Jason","date":"1/2/2014","title":"my article","__v":0}, more data basically want it to repeat as more data is inserted into the backend]

动作

import axios from "axios";

export const SET_CURRENT_CHARACTER = 'SET_CURRENT_CHARACTER';

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

export function setArticle(_id) {
    return {
        type: SET_CURRENT_CHARACTER,
        _id,
    };
}

export function addArticle(_id,title,date,author,article) {
    return {
        type: 'ADD_ARTICLE',
        payload: {
            _id,
            title,
            date,
            author,
            article,
        },
    }
}

export function updateArticle(id,title,date,author,article) {
    return {
        type: 'UPDATE_ARTICLE',
        payload: {
            _id,
            title,
            date,
            author,
            article,
        },
    }
}

export function deleteArticle(id) {
    return { type: 'DELETE_TWEET', payload: id}
}

reducer.js

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

    switch (action.type) {
        case "FETCH_ARTICLES": {
            return {...state, fetching: true}
        }
        case "FETCH_ARTICLES_REJECTED": {
            return {...state, fetching: false, error: action.payload}
        }
        case "FETCH_ARTICLES_FULFILLED": {
            return {
                ...state,
                fetching: false,
                fetched: true,
                articles: action.payload,
            }
        }
        case "ADD_ARTICLE": {
            return {
                ...state,
                articles: [...state.articles, action.payload],
            }
        }
        case "UPDATE_ARTICLE": {
            const {_id,title,date,author,article } = action.payload
            const newTweets = [...state.articles]
            const articleToUpdate = newTweets.findIndex(article => article.id === id)
            newTweets[articleToUpdate] = action.payload;

            return {
                ...state,
                articles: newTweets,
            }
        }
        case "DELETE_ARTICLE": {
            return {
                ...state,
                articles: state.articles.filter(article => article.id !== action.payload),
            }
        }
    }

    return state
}

我希望数据显示在列表中的组件。

   import React from "react"
import { connect } from "react-redux"
import { Link } from 'react-router';

import { fetchArticle } from '../../actions/fashionActions';


export default class FashionArticle extends React.Component {

this.props.fetchArticle(() => {
   this.setState({
     articleData: data  //Here data is the JSON you received from response
   )}
});

    render() {
        let rows = [];
        this.state.articleData.forEach((item, index) => {
            rows.push(<div className="new-row" key={"row_" + index}>{item.title}</div>);
        });

        return <div>
            <h1>List of Fashion Article</h1>
            <div className="my-article-list">{rows}</div>
        </div>
    }
}

Answer 1

如果您已从响应中获取数据，则只需将其绑定到fetch回调中的组件状态变量，并在组件DOM中使用它。使用额外的参数更新您的操作函数以接收回调：

export function fetchArticle(cb){
  ...

  if(cb != null){
   cb()
  }
}

在组件中，您可以通过调用生命周期函数（如componentDidMount（）或按钮事件onPress（））来检索数据。

你的功能可能如下所示：

this.props.fetchArticle(() => {
   this.setState({
     articleData: data  //Here data is the JSON you received from response
   )}
});

然后你可以在你的组件中绑定this.state.articleData，就像这样

<h1>{this.state.articleData.title}</h1>

如果您的数据包含数组，则可以将其循环显示，其中包含＆＃39; ng-repeat＆＃39;在你的render（）中：

let rows = [];
this.state.articleData.forEach((item, index) => {
  rows.push(<div className="new-row" key={"row_" + index}>{item.title}</div>);
});

现在你可以把它放到你的DOM中了：

<div className="my-article-list">{rows}</div>

如何将您的数据从redux调用到您的应用中？

1 个答案: