Реализация Redux для React для возврата данных JSON из предоставленной конечной точки - PullRequest
Новая
       18

Реализация Redux для React для возврата данных JSON из предоставленной конечной точки

0 голосов
/ 09 июля 2019

HW-назначение требует от нас использования React, Redux и Redux-Thunk для возврата данных JSON из предоставленной конечной точки с именем url в таблицу типов Excel.

Я смог вернуть соответствующие данные в таблице просто ПРОСТО, используя React Hooks и Axios, как вы увидите в codeandbox.

КОД ДЕМО

Что может быть простым способом внедрения Redux и Thunk в этот микс?

Я мог бы подумать:

  • Настройка store.js для Redux для создания хранилища и инициализации состояния

  • Создать папку действий => создать dataActions.js => написать функцию действия с методом useEffect с запросом получения Axios

  • Создать папку редуктора => создать dataReducer.js => написать редуктор, который инициализирует состояние => экспортировать функцию по умолчанию, которая имеет инструкцию switch, которая возвращает состояние полученных данных, а затем инструкцию по умолчанию для всего остального

Все это постороннее добавление Redux / Thunk - посмотреть, смогу ли я соединить все части вместе, хотя нам это не нужно для этого конкретного задания. Не уверен, как включить эти 2 в верхней части решения.

Буду признателен за любые советы или подсказки, которые помогут мне выбрать правильный путь

1 Ответ

2 голосов
/ 09 июля 2019

Чтобы конвертировать ваш пример в Redux, вы должны:

  1. Создать редуктор , который будет принимать действия и изменять хранилище.

    Вот пример 

    const initalState = {
    usersData: [],
    isLoading: false,
    isError: false,
    errorMsg: ""
};

function reducer(state = initalState, action) {
    switch (action.type) {
        case "REQUEST_USERS_DATA":
            return {
                ...state,
                isLoading: true,
                isError: false,
                errorMsg: ""
           };
        case "RECEIVE_USERS_DATA":
            return {
                ...state,
                usersData: action.usersData,
                isLoading: false,
                isError: action.isError,
                errorMsg: action.errorMsg
            };
        default:
            return state;
     }
}

  2. Создать создатель действий для запроса данных пользователей 

    export const requestUsers = url => async dispatch => {
    dispatch({
        type: "REQUEST_USERS_DATA"
    });
    try {
        const json = await axios.get(url);
        dispatch({
            type: "RECEIVE_USERS_DATA",
            usersData: json.data,
            isError: false,
            errorMsg: ""
        });
    } catch (e) {
        dispatch({
            type: "RECEIVE_USERS_DATA",
            usersData: [],
            isError: true,
            errorMsg: e
        });
    }
};

    Создатель действий отправляет действия редуктору, а также запрашивает данные с помощью axios.

  3. Создать магазин с thunk middleware , чтобы можно было отправлять функции как действия. 

    export const store = createStore(reducer, applyMiddleware(thunkMiddleware));

  4. Используйте <Provider store={store}> в App компоненте, чтобы обеспечить хранение для всех детей.

  5. Извлечение логики рендеринга в отдельный компонент, скажем TableComponent, который будет отправлять действия и получать данные из Redux. Redux теперь поддерживает свои собственные хуки , поэтому вы можете использовать useSelector и useDispatch для доступа к Redux в стиле хуков. 

    const { usersData, isError, isLoading, errorMsg } = useSelector(
    state => state
);
const dispatch = useDispatch();

А вот и рабочий образец .

...