CODEWITHSUNDEEP
reactjsreduxredux-saga
JGKim
JGKim

Reputation: 89

Should I add async code in container component?

I'm making my first React-Redux project.

I wanna get data from getListAPI.

I checked console.log(data) in [GET_LIST_SUCCESS], and there was what I wanted.

But console.log(temp) in container, I expect 'data', it was just action object(only type exists).

How can I get the '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
);

Maybe I need like async/await or Promise.then() or useCallback, etc in container?

Because I thought Redux-Saga handles async, but container isn't in Redux-Saga area.

So shouldn't I inject the container with async processing?

I wrote some code for test.

Expecting to receive other data in a few seconds.

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

Nothing changed.

It's just log action object(only type exists).

What am I missing?

Upvotes: 0

Views: 160

Answers (1)

Carlos Jim&#233;nez
Carlos Jim&#233;nez

Reputation: 496

dispatch() returns the action dispatched to the store (that's why the console.log(temp) shows the action itself).

You need to create a selector to fetch the data from the store and use the useSelector() hook:

// 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;

Upvotes: 1

Related Questions