@chulacyber

Как отрендерить полученные с помощью Api(Fetch), сохраненные в Redux(store)?

Доброго дня хабровцы :)
Как отрендерить(React) полученные данные из API?
Я уже очень сильно запутался, я слаб в react, и в js, но какого-то *** лезу в redux, и смог с его осилить :)
Вот данные которые я получаю 5e4d871c00ce9460698317.png
Какие методы есть, чтоб отобразить эти обьекты из массива users?
Пробовал с помощью метода map, но ругается что map это не функция, пробовал с помощью
Но я тупой, и могу вывести только названия данных первых входных данных, а как залезть в обьект users не знаю
Любая помощь будет полезной!
Спасибо

Главный файл проекта
import React from 'react'
import ReactDOM from 'react-dom';

import App from './Root';

// Redux + Assync => {
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import { composeWithDevTools } from 'redux-devtools-extension';
import rootReducer from './Root/Reducers/rootReducer';

const store = createStore(
    rootReducer,
    initialStore,
    composeWithDevTools(applyMiddleware(thunk))
)

ReactDOM.render(
<Provider store={store}>
    <App />
</Provider> ,document.getElementById('root'));


Контейнер где хранится в свойствах API
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { personsFetchData } from '../Actions/persons';
// import { User, Headline, Paragraph, UserImage } from '../Website/Users/UsersStyles';

class PersonsData extends Component {

    componentDidMount() {
            this.props.fetchData('https://frontend-test-assignment-api.abz.agency/api/v1/users');
    }
    
    render(){
        const gett = this.props.persons
        console.log(this.props.persons)
            return (
                null
        )
    }
}
const mapStateToProps = state => {
    return {
        persons: state.persons
    };
}
const mapDispatchToProps = dispatch => {
    return {
       fetchData: url => dispatch(personsFetchData(url)) 
    };
}
export default connect(mapStateToProps, mapDispatchToProps)(PersonsData)


Сборщик редюсеров
import { combineReducers } from 'redux';
import { persons } from './persons';

const rootReducer = combineReducers ({
    persons
});

export default rootReducer


Редюсер для получения API
export function persons(state = [], action) {
    switch (action.type) {
        case 'PERSONS_FETCH_DATA_SUCCESS':
            return {
                ...state,
                payload: action.persons
            } 
        default:
            return state;
    }
}


И актион для это
export function personsFetchDataSucces(persons) {
    return {
        type: 'PERSONS_FETCH_DATA_SUCCESS',
        persons
    }
} 

export function personsFetchData(url) {
    return (dispatch) => {
        fetch(url)
            .then(response => {
                if(!response.ok){
                    throw new Error(response.statusText)
                }
                return response
            })
            .then(response => response.json()) 
            .then(persons => dispatch(personsFetchDataSucces(persons)))
        }
    }
  • Вопрос задан
  • 980 просмотров
Решения вопроса 1
Wondermarin
@Wondermarin
import React, { Component, Fragment } from 'react';
import { connect } from 'react-redux';
import { personsFetchData } from '../Actions/persons';
// import { User, Headline, Paragraph, UserImage } from '../Website/Users/UsersStyles';

class PersonsData extends Component {
  componentDidMount() {
    this.props.fetchData('https://frontend-test-assignment-api.abz.agency/api/v1/users');
  }
  render() {
    const { users } = this.props.persons;
    return(
      <Fragment>
        { users ? users.map(user => <div>{ user.name }</div>) : null }
      </Fragment>
    );
  }
}

const mapStateToProps = state => ({
  persons: state.persons.payload,
});

const mapDispatchToProps = dispatch => ({
  fetchData: url => dispatch(personsFetchData(url)),
});

export default connect(mapStateToProps, mapDispatchToProps)(PersonsData);

И я все еще советую вам ознакомиться с документацией:
Redux https://redux.js.org/
React Redux https://react-redux.js.org/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
@Spidey123
В Redux есть компонент высшего порядка(HOC) - connect, который принимает в себя 2 параметра
mapStateToProps
и
mapDispatchToProps
и в каррированную ей функцию принимает твой компонент. Сначала описываешь
mapStateToProps
, dispatch можешь не описывать пока. С помощью connect mapStateToProps получает в себя весь state приложения как параметр и ты определяешь что вернёт в твой компонент этот mapStateToProps. См. Пример внизу
import {connect} from 'react-redux'

class App extends Component{ 
// component body here
}

const mapStateToProps = state => ({
     propName: state.path_to_prop
})

export default connect(mapStateToProps, null)(App)

И так же, чтобы твоё приложение видело твой store и имело доступ к dispatch и getState методам делаешь в рутовом компоненте(откуда начинает рендериться твоё приложение)
import {Privider} from 'react-redux'

const store = createStore(root_reducer, initial_state)

ReactDOM.hydrate(
       <Provider store={store}>
                 <Your_root_component />
        <Provider />,
         document.getElementById('body')


Если не понятно, то читай доку React+Redux
Удачи =]
Ответ написан
@abberati
frontend-разработчик
Так как вы загружаете данные из сети (а на это нужно время), то до момента, когда придут данные, в переменной nameObj Будет лежать initiallState редьюсера. Сделайте initialState пустым массивом, тогда у него будет метод map и код не будет падать. Пустой массив мапится в пустую строку.

Или в самом рендере проверяйте, что лежит в этой переменной и используйте conditional rendering
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы