Wie rufen Sie Ihre Daten von redux in Ihre App auf?

Question

Also kam ich aus einem eckigen Hintergrund, wo normalerweise ich ng-repeat verwenden würde, um meine Daten auf meiner Seite zu zeigen, aber ich bin mir nicht sicher über die genaue Methode, um es auf meiner Webseite mit react zu zeigen. js und redux. Ich weiß, dass die Aktion und die Reduzierung arbeiten, so dass kein Problem. Ich möchte nur wissen, wie Sie die Daten aufrufen, um auf die Komponente gelegt zu werden.

die Testdaten

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

Aktion

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 
} 

die Komponente, die ich die Daten auf in einer Liste angezeigt werden soll.

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

Wenn Sie bereits die Daten von Antwort erhalten haben, können Sie einfach binden Sie es an Ihre Komponente Zustandsvariablen in Rückruf holen und es in Ihrer Komponente DOM verwenden. Aktualisieren Sie Ihre Aktionsfunktionen mit einem zusätzlichen param erhalten Rückruf:

export function fetchArticle(cb){ 
    ... 

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

Und in Ihrer Komponente, die Daten durch den Aufruf der Aktion Funktion entweder in einer Lifecycle-Funktion wie componentDidMount abrufen können() oder eine Schaltfläche Ereignis onPress ().

Und Ihre Funktion könnte wie folgt aussehen:

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

Und dann können Sie this.state.articleData in Ihrer Komponente wie diese

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

binden Wenn Ihr Datenfeld enthält, können Sie Schleife es durch die gleiche wie 'ng-repeat' in Ihrem render():

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

Und Sie können es einlegen zu deinem DOM jetzt:

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