// modules/counter.js
import { createAction, handleActions } from 'redux-actions';
import { delay, put, takeEvery, takeLatest } from 'redux-saga/effects';
const INCREASE = 'counter/INCREASE';
const DECREASE = 'counter/DECREASE';
const INCREASE_ASYNC = 'counter/INCREASE_ASYNC';const DECREASE_ASYNC = 'counter/DECREASE_ASYNC';
export const increase = createAction(INCREASE);
export const decrease = createAction(DECREASE);
// 마우스 클릭 이벤트가 payload 안에 들어가지 않도록
// () => undefined를 두 번째 파라미터로 넣어 준다
export const increaseAsync = createAction(INCREASE_ASYNC, () => undefined);export const decreaseAsync = createAction(DECREASE_ASYNC, () => undefined);function* increaseSaga(){    yield delay(1000); // 1초를 기다린다    yield put(increase()); // 특정 액션을 디스패치한다}function* decreaseSaga(){    yield delay(1000);    yield put(decrease());}export function* counterSaga(){    // takeEvery는 들어오는 모든 액션에 대해 특정 작업을 처리한다    yield takeEvery(INCREASE_ASYNC, increaseSaga);    // yakeLatest는 기존에 진행 중이던 작업이 있다면 취소 처리하고    // 가장 마지막으로 실행된 작업만 수행한다    yield takeLatest(DECREASE_ASYNC, decreaseSaga);}
const initialState = 0;

const counter = handleActions(
    {
        [INCREASE]: state => state +1,
        [DECREASE]: state => state -1,
    },
    initialState
);

export default counter;

// modules/index.js
import { combineReducers } from 'redux';
import counter, { counterSaga } from './counter';import sample from './sample';
import loading from './loading';
import { all } from 'redux-saga/effects';

const rootReducer = combineReducers({
    counter,
    sample,
    loading
});

export function* rootSaga(){    // all 함수는 여러 사가를 합쳐 준다.    yield all([counterSaga()]);}
export default rootReducer;

// ./index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {applyMiddleware, createStore} from 'redux';
import {Provider} from 'react-redux';
import rootReducer, {rootSaga} from './modules';import {createLogger} from 'redux-logger';
import ReduxThunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga';import { composeWithDevTools } from 'redux-devtools-extension';
const logger = createLogger();
const sagaMiddleware = createSagaMiddleware();const store = createStore(
  rootReducer, 
  composeWithDevTools(applyMiddleware(logger, ReduxThunk, sagaMiddleware)));
sagaMiddleware.run(rootSaga);
ReactDOM.render(
  <Provider store={store}>
    <React.StrictMode>
    <App />
    </React.StrictMode>
  </Provider>,
  document.getElementById('root')
);

// modules/sample.js
import { createAction,handleActions } from 'redux-actions';
import * as api from '../lib/api';
import { call, put, takeLatest } from 'redux-saga/effects';import { startLoading, finishLoading } from './loading';

const GET_POST = 'sample/GET_POST';
const GET_POST_SUCCESS = 'sample/GET_POST_SUCCESS';
const GET_POST_FAILURE = 'sample/GET_POST_FAILURE';

const GET_USERS = 'sample/GET_USERS';
const GET_USERS_SUCCESS = 'sample/GET_USERS_SUCCESS';
const GET_USERS_FAILURE = 'sample/GET_USERS_FAILURE';

export const getPost = createAction(GET_POST, id => id);export const getUsers = createAction(GET_USERS);
function* getPostSaga(action){    yield put(startLoading(GET_POST)); // 로딩 시작. put = dispatch    // 파라미터로 action을 받아 오면 액션의 정보를 조회할 수 있다.    try{        // call을 사용하면 Promise를 반환하는 함수를 호출하고, 기다릴 수 있다.        // 첫 번째 파라미터는 함수, 나머지 파라미터는 해당 함수에 넣을 인수다.        const post = yield call(api.getPost, action.payload); // API 호출        yield put({            type: GET_POST_SUCCESS,            payload: post.data        });    } catch(e){        yield put({            type: GET_POST_FAILURE,            payload: e,            error : true        });    }    yield put(finishLoading(GET_POST)); // 로딩 완료}
function* getUsersSaga(){    yield put(startLoading(GET_USERS));    try{        const users = yield call(api.getUsers);        yield put({            type: GET_USERS_SUCCESS,            payload: users.data        });    } catch(e){        yield put({            type: GET_USERS_FAILURE,            payload: e,            error: true        });    }    yield put(finishLoading(GET_USERS));}
export function* sampleSaga(){    yield takeLatest(GET_POST, getPostSaga);    yield takeLatest(GET_USERS, getUsersSaga);}
const initialState = {
    post:null,
    users:null
};

const sample = handleActions(
    {
        [GET_POST_SUCCESS]: (state,action) => ({
            ...state,
            post: action.payload
        }),
        [GET_USERS_SUCCESS]: (state,action) => ({
            ...state,
            users: action.payload
        })
    },
    initialState
);

export default sample;

// modules/sample.js
import { createAction,handleActions } from 'redux-actions';
import * as api from '../lib/api';
import { takeLatest } from 'redux-saga/effects';
import createReqeustSaga from '../lib/createRequestSaga';

const GET_POST = 'sample/GET_POST';
const GET_POST_SUCCESS = 'sample/GET_POST_SUCCESS';

const GET_USERS = 'sample/GET_USERS';
const GET_USERS_SUCCESS = 'sample/GET_USERS_SUCCESS';

export const getPost = createAction(GET_POST, id => id);
export const getUsers = createAction(GET_USERS);

const getPostSaga = createReqeustSaga(GET_POST, api.getPost);const getUsersSaga = createReqeustSaga(GET_USERS, api.getUsers);
export function* sampleSaga(){
    yield takeLatest(GET_POST, getPostSaga);
    yield takeLatest(GET_USERS, getUsersSaga);
}

const initialState = {
    post:null,
    users:null
};

const sample = handleActions(
    {
        [GET_POST_SUCCESS]: (state,action) => ({
            ...state,
            post: action.payload
        }),
        [GET_USERS_SUCCESS]: (state,action) => ({
            ...state,
            users: action.payload
        })
    },
    initialState
);

export default sample;