Получить и обработать даные, React/Redux?

Question

[Andrew Chil]

Добрый вечер всем! Подскажите пожалуйста как в React/Redux правильно получить данные? Данные должны меняться по селекту. Понимаю, что наверное, аякс запрос должен быть в actions. Знание redux по сути минимальные, но нужно сделать правильно. Поэтому подскажите куда дальше должны идти даные, как и где обрабатываться?
Очень запутался в этом... буду благодарен какой-то пример.
Второй вопрос если данные в xml-формате, как с ними работать или как конвертировать в json?
Возможно, в redux для этого есть какой-то свой подход?
Заранее благодарю!

Comments

[Михаил Плюснин]

на сайте документации по redux, есть масса отличных примеров. А так, что касается, твоего вопроса, происходит изменение, ташишь данные с сервера, диспачишь их в хранилище(что касается обработки, можно обработать их в Action, а можно уже в самом reducer, который обновляет state), после чего твой компонент который подкелючен к хранилищу, подхватит эти данные и перересуется.

Answer 1

[aphows]

Redux используется как хранилище для данных, то есть ваша задача получить данные, обработать их, а потом занести их в state. Дальше можно использовать эти данные уже во вьюхах в обработанном виде.
Асинхронность реализуется через middleware, самый распространенный - redux-thunk от gaeron. Он позволяет возвращать из экшна не объект, а функцию, в которую передастся dispatch, и через который можно будет вызвать изнутри этой функции другие экшны.

import convert from 'xml-js'; // https://www.npmjs.com/package/xml-js

class apiClient {
    get(url) {
        return Promise.resolve(/* do something async */)
    }
}
// actions
export function getData() {
    return (dispatch, getState) => {
        dispatch({
            type: 'data/LOAD_STARTED',
        });
        apiClient.get('/api')
            .then((response) => {
                const data = convert.xml2json(response.data, {compact: true, spaces: 4});
                dispatch({
                    type: 'data/LOAD_SUCCESS',
                    payload: data
                })
            })
            .catch((e)=> {
                dispatch({
                    type: 'data/LOAD_ERROR',
                    payload: e,
                })
            });
    }
}

Comments

[Andrew Chil]

Спасибо за ответ!
class apiClient {
get(url) {
return Promise.resolve(/* do something async */)
}
}
не понимаю этот кусок кода, он должен находится в container? Как он принимает данные?
И стоит ли использовать это если у меня не большое приложение може что-то проще есть для начинающих?

[aphows]

Andrew Chil: можно использовать аяксовые либы, а потом обернуть их в промис, либо сразу использовать промисовые либы. Лично я использую axios (https://github.com/mzabriskie/axios).
Здесь важно понять, что apiClient.get() возвращает промис, а затем в then обрабатываем коллбек синхронно. Немного информации о промисах https://learn.javascript.ru/promise