어제는 결국 못찾고 잠들었습니다.....ㅎㅎ
그래서 오늘은 새로운 saga를 들고 왓습니다.
이어서 하던 폴더에서 코드로 열어주시고
npm i redux-saga 해주세요
store.js 가서
import { applyMiddleware, createStore } from "redux";
import promise from "redux-promise-middleware";
import thunk from "redux-thunk";
import fileReducer from "./modules/reducer";
import { composeWithDevTools } from "redux-devtools-extension";
import createSagaMiddleware from "@redux-saga/core";
const Saga = createSagaMiddleware();
const store = createStore(
fileReducer,
composeWithDevTools(applyMiddleware(thunk, promise, Saga))
);
export default store;
작성
const Saga = createSagaMiddleware(); 이부분을 설명하면 간단하게 Sag라는 미들웨어를 만들어서 Saga에 저장해주고
composeWithDevTools(applyMiddleware(thunk, promise, Saga)) 이렇게 해서 devtools로 관리및사용 가능하게 하는 겁니다.
그럼이제 안에 넣을 내용을 만들어주러 가봅시다\
redux/moudles/user.js로 이동
import { put, takeEvery } from "@redux-saga/core/effects";
function* SageUser() {
const res = yield [
{ name: "mark1", id: 1 },
{ name: "mark2", id: 2 },
{ name: "mark3", id: 3 },
{ name: "mark4", id: 4 },
{ name: "mark5", id: 5 },
];
yield put(indata(res));
}
const SagaStart = "SagaStart";
export function SagaUserStart() {
return {
type: SagaStart,
};
}
export function* UseSaga() {
yield takeEvery(SagaStart, SageUser);
}
추가해주세요
import 부분은 위에 적으시면 됩니다.
이제 설명해보겠습니다.
Sageuser는 사과를 어떻게 사용할건지 입니다. 즉 내용이죠 res에데이터를 받아서 put을 이용해서 dispatch하는 것입니다.
그럼 yield는 뭐냐고 생각하실텐데 각 행동의 시작점이라고 생각하시면 됩니다. yield마다 행동 하나 하나라고 생각하시면 되요
SagaUserStart는 뭔지 아시겠죠? 그냥 SagStart를 보내줌으로써 사과를 시작할 신호역할을 하는 겁니다.
그럼 useSaga에서 type:SagaStart를 받아서 SageUser를 실행합니다.
그럼이제 modules안에 SagaRoot.js를 만들어주시고
import { all } from "redux-saga/effects";
import { UseSaga } from "./user";
export default function* rootSage() {
yield all([UseSaga()]);
}
여기는 all만 설명하겠습니다.all은 Saga들을 합쳐주느것이에요 지금은 한개밖에 없지만 여러개가 된다면 합치고 이것들을 실행 시켜줍니다. 여기서 실행시켜준다는 것은 우리가 일반적으로 생각하는 함수실행가는 다른 개념입니다. 그냥 간단하게 합쳐준다고 생각하시면 편해요
다시 redux/store.js 로 이동해주세요
Saga.run(rootSage);
추가
여기서는 만들어둔 공간에 합쳐진 사과를 올려준다고 생각하시면 편합니다.
src/components/use.js 이동
import Liststore from "../hook/liststore";
import addstore from "../hook/addstore";
import { SagaUserStart } from "../redux/modules/user";
import { useEffect } from "react";
export default function List() {
const state = Liststore();
const dispatch = addstore();
useEffect(() => {
dispatch(SagaUserStart());
}, [dispatch]);
return (
<div>
{state.user.data.map((p) => (
<li key={p.id}>{p.name}</li>
))}
</div>
);
}
useEffect내부에 dispatch내부내용을 바꺼서 Saga를 사용해서 실행하면 데이터가 잘 전달되는지 확인해보겠습니다.
npm start 해주세요
이렇게 잘나온느것을 확인할수 있습니다.
