如何將您的數據從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>