Copy
yarn add redux-saga

javascript
Copy
import {createAction, handleActions} from 'redux-actions';
import {delay, put, takeEvery, takeLatest} from 'redux-saga/effects';

//Action 타입 정의
const INCREASE3 = 'counter/INCREASE3';
const DECREASE3 = 'counter/DECREASE3';
//Saga Action 타입 정의
const INCREASE3_ASYNC = 'counter/INCREASE3_ASYNC';
const DECREASE3_ASYNC = 'counter/DECREASE3_ASYNC';

//Action 생성 함수 정의
export const INCREASE3_ACTION = createAction(INCREASE3);
export const DECREASE3_ACTION = createAction(DECREASE3);
export const INCREASE3_ASYNC_ACTION = createAction(INCREASE3_ASYNC);
export const DECREASE3_ASYNC_ACTION = createAction(DECREASE3_ASYNC);

//Worker Saga 정의
//put : 특정 액션을 디스패치 합니다.
//takeEvery : 모든 액션을 처리합니다.
//takeLatest : 가장 마지막으로 디스패치된 액션을 처리합니다.
function* increaseSaga() {
    console.log('3. increaseSaga 호출');
    yield delay(1000);
    yield put(INCREASE3_ACTION());
}
function* decreaseSaga() {
    console.log('3. decreaseSaga 호출');
    yield delay(1000);
    yield put(DECREASE3_ACTION());
}
//Watcher Saga 정의
export function* counterSaga() {
    console.log('3. counterSaga 호출');
    yield takeEvery(INCREASE3_ASYNC_ACTION, increaseSaga);
    yield takeLatest(DECREASE3_ASYNC_ACTION, decreaseSaga);
}

//State 초기값 정의
const initialState = {
    number: 0,
};

//Reducer 정의
const counter3Reducer = handleActions(
    {
        [INCREASE3]: (state, action) => {
            console.log('3. counter3 Reducer 호출');
            console.log('  [parameter] previousState : ', state);
            console.log('  [parameter] action : ', action);
            let newState = {...state, number: state.number + 1};
            console.log('  [return] newState : ', newState);
            return newState;
        },
        [DECREASE3]: (state, action) => {
            console.log('3. counter3 Reducer 호출');
            console.log('  [parameter] previousState : ', state);
            console.log('  [parameter] action : ', action);
            let newState = {...state, number: state.number - 1};
            console.log('  [return] newState : ', newState);
            return newState;
        },
    },
    initialState,
);
export default counter3Reducer;

javascript
Copy
import {combineReducers} from 'redux';
import counter3Reducer, { counterSaga } from "./counter3";
import {penderReducer} from 'redux-pender';
import promiseDataReducer from './promiseData';
import { all } from 'redux-saga/effects';

//combineReducers() 함수를 이용하여 여러개의 Reducer를 합칩니다.
//합쳐진 Reducer를 rootReducer라고 부릅니다.
const rootReducer = combineReducers({
    //other reducers...
    counter3Reducer,
    promiseDataReducer,
    pender: penderReducer,
});

//all() 함수를 이용하여 여러개의 Saga를 합칩니다.
//합쳐진 Saga를 rootSaga라고 부릅니다.
export function* rootSaga() {
    yield all([counterSaga()]);
}

export default rootReducer;

javascript
Copy
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux'
import rootReducer, {rootSaga} from './src/redux/modules/rootReducer';
import penderMiddleware from 'redux-pender';
import createSagaMiddleware from 'redux-saga';
import { default as HomeScreen } from "./src/screen/HomeScreen";
import { default as ReduxSagaScreen } from "./src/screen/redux/ReduxSagaScreen";
...생략

enableScreens();
const Stack = createStackNavigator();

function App() {
    //SagaMiddleware를 생성합니다.
    const sagaMiddleware = createSagaMiddleware();

    //creactStore() 함수를 이용하여 Store를 생성합니다.
    //rootReducer를 첫번째 파라미터로 전달하며, Middleware를 두번째 파라미터로 전달합니다.
    const store = createStore(
        rootReducer,
        applyMiddleware(penderMiddleware(), sagaMiddleware),
    );

    //rootSaga를 실행해줍니다.
    sagaMiddleware.run(rootSaga);

    //Provider 컴포넌트는 컴포넌트들이 Redux의 Store에 접근 가능하도록 해주는 컴포넌트입니다.
    //컴포넌트의 Root 위치에 Provider 컴포넌트로 감싸줍니다.
    return (
        <Provider store={store}>
            <NavigationContainer>
                <Stack.Navigator initialRouteName="HomeScreen">      
                <Stack.Screen name="ReduxSagaScreen" component={ReduxSagaScreen} />
                ...생략
            </Stack.Navigator>
        </NavigationContainer>
    </Provider>
  );
}

export default App;

javascript
Copy
import {useDispatch, useSelector} from 'react-redux';
import {
  INCREASE3_ASYNC_ACTION,
  DECREASE3_ASYNC_ACTION,
} from '../../redux/modules/counter3';
...생략

const ReduxSagaScreen = () => {
  //useSelector는 Store의 State를 조회하는 Hook입니다.
  const {number} = useSelector(state => ({
    number: state.counter3Reducer.number,
  }));

  //useDispatch는 Store의 함수를 사용 할 수 있게 해주는 Hook 입니다.
  //dispatch(action) 함수는 State를 변화시키기 위해 Action을 발생시킵니다.
  const dispatch = useDispatch();
  const onIncrease = () => {
    console.log('2. dispatch(INCREASE3_ASYNC_ACTION()) 함수 호출');
    dispatch(INCREASE3_ASYNC_ACTION());
  };
  const onDecrease = () => {
    console.log('2. dispatch(DECREASE3_ASYNC_ACTION()) 함수 호출');
    dispatch(DECREASE3_ASYNC_ACTION());
  };

  console.log('4. UI 업데이트');
  return (
    <View style={styles.screen}>
      <Text style={styles.text}>숫자 : {number}</Text>
      <Button onPress={onIncrease} title="+" />
      <Button onPress={onDecrease} title="-" />
    </View>
  );
};

...생략

export default ReduxSagaScreen;