Форум программистов, компьютерный форум, киберфорум
Наши страницы
JavaScript: ReactJS
Войти
Регистрация
Восстановить пароль
 
Ислам2001
C# .NET Программист
30 / 17 / 5
Регистрация: 11.11.2016
Сообщений: 375
1

React.JS + Redux. Отправка запроса и чтение данных JSON

11.01.2019, 08:45. Просмотров 304. Ответов 1
Метки нет (Все метки)

Всем привет. Работаю на ASP.NET Core. Подключил React/Redux. И теперь есть одна проблема.
Создал код для подключения к серверу. Но почему-то не могу получить данные JSON.
Вот код actionCreators:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const getItems = "GET_ITEMS";
const initialState = { items: [] }
 
export const actionCreators = {
    get: () => async (dispatch, getState) => { 
        const url = `api/SampleData/GetItems`;
        const response = await fetch(url);
        const forecasts = response.json();
        dispatch({ type: getItems, forecasts });
    }
};
 
export const reducer = (state, action) => {
    state = state || initialState;
    if (action.type === getItems) {
        return { ...state, items: action.items };
    }
    return state;
};
Код компонента:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import React, { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { actionCreators } from '../../store/controls/SearchBox';
 
class SearchBox extends Component {
    constructor(props){
        super(props);
    }
    componentWillMount() {
        this.props.getItems();
    }
 
    componentWillReceiveProps(nextProps) {
        this.props.getItems();
    }
 
    render() {
        return (
            <div>
                <h1>Items</h1>
                {this.props.items} //Здесь ставятся полученные данные (но не знаю, как это сделать)
            </div>
        );
    }
}
 
export default connect(
    state => state.searchBox,
    dispatch => bindActionCreators(actionCreators, dispatch)
)(SearchBox);
Читал про функцию map. Но не получается через нее. Пишет, что нет такой функции...
Иногда выдает ошибку, что не получилось взять данные. Что-то связано с "Promise.all", точно не помню.

В общем, вопрос. Как мне отправить данные на сервер, получить их в JSON формате и расставить в элементы?
С AJAX было гораздо проще...

Заранее благодарен.
0
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
11.01.2019, 08:45
Ответы с готовыми решениями:

Redux-Semantic-UI-React
Фронтенд разработка для веб традиционно делится на оформление (HTML/CSS) и интерактивность (JS). Но...

Практика react-redux
Хотел я значит сделать игру, так как более менее основы знаю react+redux, а итоге такого наворотил,...

Redux+React. Взаимодействие redux store с сервером
Помогите понять такой момент: Приложение react+redux+ сервер на ноде. Пока не использовал сервер...

JSON. Чтение полученных данных с запроса VKAPI
Ребята, сижу уже 5 часов, ломаю бошку, не как не могу спарсить данные с JSON запроса из контакта,...

Стажировка JS (REACT + REDUX)
Привет всем. Ищу удаленную по REACT + REDUX. Удаленно. Обучаемый, пунктуальный. Свяжусь с Вами...

1
shsv382
11 / 9 / 3
Регистрация: 14.11.2016
Сообщений: 100
Завершенные тесты: 1
22.01.2019, 10:49 2
1. AJAX-вызовы в React делай не в componentWillMount, а в componentDidMount
2. AJAX вызовы асинхронны, следовательно, компоненты уже успеют отрендериться, когда твой state изменится. Поэтому для асинхронного управления состоянием тебе нужен мидлвар - redux-thunk (проще) или redux-saga (мощнее)
0
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
22.01.2019, 10:49

JS React Router Redux
Всем доброго времени суток. Я программист VBA и недавно стал изучать JS. Помогите разобраться с...

Взаимодейтвие React, Redux, Immutable
Изучаю в данный момент набор технологий упомянутые в названии темы. Делаю тестовый проект с целью...

React + Redux или Angular2 ?
Здравствуйте. Встал вопрос между выбором фреймворка/либы для нового проекта. В планах создать...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
2
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru