Возможность просмотра JSON в консоли, но не знаю, как отображать его в поле зрения - React-Redux

Question

Я все еще изучаю React-Redux. Я понимаю, как получить простые массивы JSON. Однако я не уверен, как вызвать вложенный объект. Я пытаюсь захватить титул, и я просмотра этого в консоли:

• объектов
  • данные: Объект
    • данные: Объект
      • данные: Объект
        • после: "t3_5t0hy2" до: nullchildren: Array [25]
          • 0: Объект
            • данные: Объект
              • Title: "Настройка Google Analytics я использую на каждый сайт я строю (Филип Уолтон)"

dataAction.js

import axios from 'axios'; 


export function fetchData(){ 
    return function(dispatch){ 
    axios.get("https://www.reddit.com/r/webdev/top/.json") 
    .then((response) => { 
     dispatch({ type: "FETCH_DATA_FULFILLED", payload: response.data}) 
    }) 
    .catch((err) => { 
     dispatch({type: "FETCH_DATA_REJECTED", payload: err}) 
    }) 
    } 
} 

export function addData(id, text){ 
    return { 
    type: 'ADD_DATA', 
    payload:{ 
     id, 
     title, 
    }, 
    } 
} 

export function updateData(id, text){ 
    return { 
    type: 'UPDATE_DATA', 
    payload: { 
     id, 
     title, 
    }, 
    } 
} 

export function deleteData(id){ 
    return { 
    type: 'DELETE_DATA', 
    payload: id 
    } 
} 

Layout.js (компонент)

import React from "react" 
import { connect } from "react-redux" 

import { fetchUser } from "../actions/userActions" 
import { fetchPartner } from "../actions/projectActions" 
import { fetchData } from "../actions/dataActions" 

@connect((store) => { 
    return { 
    user: store.user.user, 
    userFetched: store.user.fetched, 
    partner: store.partner.partner, 
    partnerFetched: store.partner.fetched, 
    data: store.data.data 
    }; 
}) 
export default class Layout extends React.Component { 
    componentWillMount() { 
    this.props.dispatch(fetchUser()) 
    this.props.dispatch(fetchPartner()) 
    this.props.dispatch(fetchData()) 
    } 


    render() { 
    const { user, partner, data } = this.props; 



    //const mappedData = data.map(data => <li>{data.title}</li>) 

    return <div> 
     <h1>{user.name}{user.age}</h1> 
     <h1>{partner.title}</h1> 
     <ul>{data.title}</ul> 
    </div> 
    } 
} 

Reducer.js

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

    switch(action.type){ 
     case "FETCH_DATA":{ 
     return {...state, fetching:true} 
     } 
     case "FETCH_DATA_REJECTED":{ 
     return {...state, fetching: false, error: action.payload} 
     } 
     case "FETCH_DATA_FULFILLED":{ 
     return {...state, fetching: false, fetched: true, data: action.payload} 
     } 
     case "ADD_DATA":{ 
     return {...state, data: [...state.data, action.payload]} 
     } 
     case "UPDATE_DATA":{ 
     const { id, title } = action.payload 
     const newData = [...state.data] 
     const dataToUpdate = newData.findIndex(data => data.id === id) 
     newData[dataToUpdate] = action.payload; 

     return {...state, data: newData} 
     } 
     case "DELETE_DATA":{ 
     return {...state, data: state.data.filter(data => data.id !== action.payload)} 
     } 
    } 
    return state 
    } 

Когда эта проблема будет решена, следующим шагом будет перебор по объекту, который я также не знаю, как достичь.

Answer 1

Как вы отправляете полезную нагрузку: response.data Вы можете пойти дальше в структуре объекта и отправить фактические данные в полезную нагрузку.

После отправки полезной нагрузки вам понадобится редуктор, который изменит состояние. Следуйте этому руководству о том, как создать редуктор. http://blog.scottlogic.com/2016/05/19/redux-reducer-arrays.html

Затем, как только состояние будет обновлено, вы получите код, считывающий значения из состояния. После изменения состояния React автоматически обновит или отобразит, и вы сможете написать свою логику.