- context API 부분을 ReduxToolkit으로 변경
1. HomeContext
export const HomeContextProvider = createContext(null);
////index.js에서 HomeContext 안에 있는 요소를 매개변수인 ({children})으로 가져온다.
//children: App
function HomeContext({ children }) {
const [selectedMember, setSelectedMember] = useState("");
return (
//Context.provider를 사용하여 props로 전달
//{children} : HomeContext에서 받아온 children을 provider의 범위로 지정
<HomeContextProvider.Provider value={{ selectedMember, setSelectedMember }}>
{children}
</HomeContextProvider.Provider>
);
}
export default HomeContext;
2. LatterContext
export const LatterContextProvider = createContext(null);
//index.js에서 LatterContext 안에 있는 요소를 매개변수인 ({children})으로 가져온다.
//children: App
function LatterContext({ children }) {
const [data, setData] = useState(fakeData);
return (
//Context.provider를 사용하여 props로 전달
//{children} : LatterContext에서 받아온 children을 provider의 범위로 지정
<LatterContextProvider.Provider value={{ data, setData }}>
{children}
</LatterContextProvider.Provider>
);
}
export default LatterContext;
-confingureStore 부분
//전역 state 관리 저장소(관리소)
const store = configureStore({
reducer: {
lists: lists,
members: members,
},
});
export default store;
//초기값 설정
const initialState = [];
//redux slice 설정
const listSlice = createSlice({
name: "lists",
initialState,
//reducer + action 합쳐진 형태
reducers: {
//초기 데이터 저장
setList: (state, action) => {
return (state = action.payload);
},
//추가 기능
addList: (state, action) => {
return [action.payload, ...state];
},
//삭제 기능
deleteList: (state, action) => {
return state.filter((item) => item.id !== action.payload);
},
//수정 기능
modifyList: (state, action) => {
const { id, inputValue } = action.payload;
console.log(action);
return state.map((item) => {
if (item.id === id) {
return { ...item, content: inputValue };
} else {
return item;
}
});
},
},
});
//export
export const { setList, addList, modifyList, deleteList } = listSlice.actions;
export default listSlice.reducer;
//초기값
const initialState = ["에스파"];
const memberSlice = createSlice({
name: "members",
initialState,
reducers: {
selectMember: (state, action) => {
return (state = action.payload);
},
},
});
//actions
export const { selectMember } = memberSlice.actions;
//reducer
export default memberSlice.reducer;