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

Question

所以我来自角度背景，通常我会使用ng-repeat来获取我的数据在我的页面上显示，但我不确定使用反应在我的网页上显示的确切方法。 JS和REDX。我知道行动和减速器正在工作，所以不是问题。我只是想知道你是如何调用这些数据才能被放到组件上的。

测试数据

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

如果您已经获得了响应数据，您可以在获取回调中将其绑定到组件状态变量，并在组件DOM中使用它。一个额外的PARAM更新您的行为函数接受回调：通过调用生命周期中的功能，如componentDidMount（动作函数或者）或按钮事件onPress

export function fetchArticle(cb){ 
    ... 

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

而在你的组件，你可以检索的数据（ ）。

而且你的函数看起来是这样的：

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

然后你就可以在你的组件这样

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

如果数据中包含数组绑定this.state.articleData，你可以循环它通过它与你的render（）中的'ng-repeat'一样：

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>