Get and process data, React/Redux?

Question

JavaScript

Good evening everyone! Can you please tell me how to get the data correctly in React / Redux? The data should change on . I understand that probably, the Ajax request should be in actions. Knowledge of redux is essentially minimal, but needs to be done right. Therefore, tell me where the data should go next, how and where to be processed?
Very confused about this ... I will be grateful for some example.
The second question is if the data is in xml format, how to work with it or how to convert it to json?
Perhaps redux has a different approach for this?
Thank you in advance!

Answer 1

Redux is used as a storage for data, that is, your task is to receive data, process it, and then put it in state. Then you can use this data already in views in a processed form.
Asynchrony is implemented through middleware, the most common is redux-thunk from gaeron. It allows you to return from an action not an object, but a function to which dispatch will be passed, and through which it will be possible to call other actions from within this function.

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,
                })
            });
    }
}