React redux-saga 사용하기

redux-saga를 사용하기 위한 기본 설정 방법이다

redux를 만든 사람이 이렇게 하라고 만든 거여서 그대로 따라 쓰면 된다

npm i redux react-redux redux-saga redux-devtools-extension 
npm i -D redux-logger

---

src/saga/index.js

import { all, fork } from "redux-saga/effects";

import postSaga from "./post";
import userSaga from "./user";

export default function* rootSaga() {
  yield all([fork(postSaga), fork(userSaga)]);
}

postSaga, userSaga라는 Saga를 만들어서 fork에 넣어주면 된다

---

src/reducer/index.js

import { combineReducers } from "redux";
import todo from "./todo";
import post from "./post";
const rootReducer = combineReducers({
  todo,
  post,
});

export default rootReducer;

 

React Redux 사용하기

redux 사용하기에서 만든 reducer를 쓰면 된다

---

src/store/store.js

import { applyMiddleware, createStore } from "redux";
import rootReducer from "../reducer";
import { composeWithDevTools } from "redux-devtools-extension";
import createSagaMiddleware from "redux-saga";
import rootSaga from "../saga";
import { createLogger } from "redux-logger";

const logger = createLogger();
//리덕스의 실행 콘솔을 찍어주는 미들웨어를 사용하고 변수에 담아준 것
const sagaMiddleware = createSagaMiddleware();
//리덕스 사가를 실행하기 위해 변수를 담아준 것
//store를 리턴으로 받기 위한 함수
const configureStore = () => {
  const enhancer =
    process.env.NODE_ENV === "development"
      ? composeWithDevTools(applyMiddleware(logger, sagaMiddleware)) //개발환경이면 데브툴즈를 포함, 로거도 포함
      : applyMiddleware(sagaMiddleware);
  //아닐 경우 사가만 포함
  const store = createStore(rootReducer, enhancer);
  sagaMiddleware.run(rootSaga);
  //사가를 실행하는 함수 createStore를 실행할 경우 적용하기 위해 함수 안에 삽입
  return store;
  //설정값 리턴하는 함수
};

export default configureStore;

---

src/index.js

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { ThemeProvider } from "styled-components";
import { theme } from "./style/theme";
import { Provider } from "react-redux";
import configureStore from "./store/store";

const store = configureStore();

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <Provider store={store}>
    <ThemeProvider theme={theme}>
      <React.StrictMode>
        <App />
      </React.StrictMode>
    </ThemeProvider>
  </Provider>
);

reportWebVitals();

 

이렇게 하면 redux-saga 사용 준비 완료!