TIL 36. 2024-02-19

• context API 부분을 ReduxToolkit으로 변경

context-API 부분

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;

Redux-toolkit으로 변경

-confingureStore 부분

//전역 state 관리 저장소(관리소)
const store = configureStore({
  reducer: {
    lists: lists,
    members: members,
  },
});

export default store;

1. LetterContext => lists

//초기값 설정
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;

2. HomeContext => members

//초기값
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;