我应该在容器组件中添加异步代码吗？

Question

我正在制作我的第一个 React-Redux 项目。

我想从 getListAPI 获取数据。

我在[GET_LIST_SUCCESS]中检查了console.log(数据)，这就是我想要的。

但是 console.log(temp) 在容器中，我预计 'data'，它只是操作对象（仅存在类型）。

如何获得 'data'？

// 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 等？

因为我认为 Redux-Saga 处理异步，但容器不在 Redux-Saga 区域。

那么我不应该用异步处理注入容器吗？

我写了一些测试用的代码。

期待在几秒钟内收到其他数据。

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

没有任何变化。

它只是日志操作对象（只有类型存在）。

我错过了什么？

Answer 1

dispatch() returns 发送到商店的操作（这就是 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;

我应该在容器组件中添加异步代码吗？

Should I add async code in container component?

reactjs

redux

redux-saga