Должен ли я добавить код asyn c в компонент контейнера? - PullRequest
Новая
       67

Должен ли я добавить код asyn c в компонент контейнера?

0 голосов
/ 17 июня 2020

Я делаю свой первый проект React-Redux.

Я хочу получить данные из getListAPI.

Я проверил console.log (данные) в [GET_LIST_SUCCESS], и вот что Я хотел.

Но console.log (temp) в контейнере, я ожидаю «данных», это был просто объект действия (существует только тип).

Как я могу получить «данные» ? 

// container
import React from 'react';
import { useDispatch } from 'react-redux';

import Home from 'presentations/Home';
import * as homeActions from 'modules/home';

const HomeContainer = () => {
    const dispatch = useDispatch();

    const temp = dispatch(homeActions.getList());
    console.log(temp);

    return (
        <Home />
    );
}

export default HomeContainer;

// Redux module
import axios from 'axios';
import { call, put, takeEvery } from 'redux-saga/effects';
import { createAction, handleActions } from 'redux-actions';

function getListAPI() {
    return axios.get('http://localhost:8000/');
}

const GET_LIST         = 'home/GET_LIST';
const GET_LIST_SUCCESS = 'home/GET_LIST_SUCCESS';
const GET_LIST_FAILURE = 'home/GET_LIST_FAILURE';

export const getList = createAction(GET_LIST);

function* getListSaga() {
    try {
        const response = yield call(getListAPI);
        yield put({ type: GET_LIST_SUCCESS, payload: response });
    } catch (e) {
        yield put({ type: GET_LIST_FAILURE, payload: e });
    }
}

const initialState = {
    data: {
        id: '',
        title: '',
        created_at: '',
        updated_at: '',
        content: '',
        view: '',
    }
};

export function* homeSaga() {
    yield takeEvery('home/GET_LIST', getListSaga);
}

export default handleActions(
    {
        [GET_LIST_SUCCESS]: (state, action) => {
            const data = action.payload.data;
            console.log(data);
            return {
                data
            };
        }
    }, initialState
);

Может быть, мне нужно async / await или Promise.then () или useCallback, et c в контейнере?

Потому что я думал, что Redux-Saga обрабатывает asyn c, но контейнера нет в области Redux-Saga.

Так не следует ли мне вводить контейнер с обработкой asyn c?

Я написал код для тестирования.

Ожидается получение других данных через несколько секунд. 

// container
    // const temp = dispatch(homeActions.getList());
    let temp = dispatch(homeActions.getList());
    let timer = setInterval(() => console.log(temp), 1000);
    setTimeout(() => { clearInterval(timer); alert('stop');}, 50000);

Ничего не изменилось.

Это просто объект действия журнала (существует только тип).

Что мне не хватает?

1 Ответ

1 голос
/ 17 июня 2020

dispatch() возвращает действие, отправленное в магазин (поэтому console.log(temp) показывает само действие).

Вам необходимо создать селектор для получения данных из магазина и использовать useSelector() крючок: 

// container
import React from 'react';
import { useDispatch } from 'react-redux';

import Home from 'presentations/Home';
import * as homeActions from 'modules/home';

const selectData = (state) => state.data

const HomeContainer = () => {
    const dispatch = useDispatch();
    const temp = useSelector(selectData)

    dispatch(homeActions.getList());

    // Do something with temp

    return (
        <Home />
    );
}

export default HomeContainer;
...