리액트 dispatch 안타는 문제

export const store = configureStore({
  reducer: rootReducer,
});

dispatch() 하는데도 slice에서 안 먹는 문제로 6시간 정도 고생하다가 누가 알려주심 ㅋㅋ
챗지피티 계속 물어봐도 같은 대답만하고 프로젝트 구조를 모르니 도움이 안됐다

 

일단, 분명 useBoard까지는 잘 찍히는데, dispatch를 안타는게 문제

디버깅해도 안되었다

 

//index

export const store = configureStore({
  reducer: {
    board: boardSlice,  
  },
});

//boardSlice 

const boardSlice = createSlice({
  name: 'board',
  initialState,
  reducers: {
    setBoard: (state, action: PayloadAction<BoardData[]>) => {
      return [...action.payload];
    },
    clear: () => initialState,
  },
});

export const { setBoard } = boardSlice.actions;
export default boardSlice.reducer;

//useBoard

const useBoard = () => {
  const dispatch = useDispatch();

  const setBoardData = (data: BoardData[] | undefined) => {
    if (!data) data = [];
    dispatch(setBoard(boardData));   
  };
  return setBoardData;
};

export default useBoard;

//index

useEffect(() => {
  const getData = async () => {
    try {
      const data = await fetchBoard();
       
      setBoard(data);   
    } catch (error) {
,,
    }
  };

  getData();
}, [board]);

________________________________________________
분명 인덱스 스토어에 연결했다고 생각했는데,

바보같이 RootReducer 에 연결을 안함,,, ㅎㅎ

앞으로 할때, main 부터 차근차근 가보자

1. Redux Provider 연결

<Provider store={store}>

 

• Provider는 react-redux에서 제공하는 컴포넌트로, 애플리케이션의 상태 관리를 위해 Redux store를 React 컴포넌트 트리에 연결
• 이 컴포넌트를 통해, 하위의 모든 컴포넌트는 useSelector와 useDispatch를 사용하여 Redux 상태와 액션에 접근 가능

2. store 설정

export const store = configureStore({
  reducer: rootReducer,
});

 

 

• Redux 상태를 관리하는 store를 생성
• configureStore는 Redux Toolkit에서 제공하는 함수로, redux의 createStore를 개선한 버전
• reducer: 상태 변경 로직을 정의한 리듀서를 전달합니다. 여기서는 rootReducer를 사용 
• 추가 옵션: middleware, devTools 등을 포함할 수 있음

3. 리듀서 묶기 (rootReducer)

const rootReducer = combineReducers({
 board: boardSlice,
  })

 

 

• combineReducers는 여러 리듀서를 하나의 루트 리듀서로 결합하는 함수 
• 역할: 각각의 리듀서는 특정 상태 조각(state slice)을 관리하며, combineReducers는 이를 하나로 합쳐 최종 상태 트리를 생성 
  
  
  참고)챗지피티