(Redux) 리덕스 사용해보기

---

Redux란 ?

자바스크립트 상태관리 라이브러리이다.

 

Redux 사용하기 전에 알아야 할 세가지

1. store

• - 스토어라는 공간이 따로 있어서 스토어 안에서 필요한 상태를 담는다.
• - 상태 정보가 필요할 때 스토어에 접근한다.

2. action

• - 스토어에 운반할 데이터를 의미
• - 자바스크립트 객체 형식으로 되어있다.

3. reducer 

• - action -> store 가 아닌 action -> reducer로 전달한다.
• - reducer가 action을 보고 store의 상태를 업데이트하는 것이다.
• - action을 reducer로 전달하기 위해 dispatch() 메소드를 사용해야한다.

위 개념을 바탕으로 내가 짠 코드

homeslice.tsx

import { createSlice } from '@reduxjs/toolkit';

interface HomeState {
  current: string;
}

const initialState: HomeState = {
  current: 'null',
};

export const homeSlice = createSlice({
  name: 'home',
  initialState,
  reducers: {
    setCurrent: (state, action) => {
      state.current = action.payload;
    },
  },
});

export const { setCurrent } = homeSlice.actions;

 

- typescript와 redux toolkit을 사용하여 홈 상태를 관리하는 redux 슬라이스를 생성하였다.

- current는 'null'로 초기설정을 해주었고, `setCurrent` 액션을 정의하고 있다.

- setCurrent를 통해 홈 상태를 변경하고자 한다,

RootReducer.tsx

import { combineReducers } from '@reduxjs/toolkit';
import { homeSlice } from './homeSlice';

const rootReducer = combineReducers({
  home: homeSlice.reducer,
});

export default rootReducer;

export type RootState = ReturnType<typeof rootReducer>;

 

- redux에서 여러개의 슬라이스를 하나로 합치는 데 사용되는 combineReducers 함수를 사용해 Redux 스토어의 상태를 여러 개의 리듀서로 분할하여 관리할 수 있게 해주었다,

- 루트 리듀서의 반환 타입을 RootState라는 타입으로 반환해주었다.

main.tsx

const store = configureStore({
  reducer: rootReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: false,
    }),
  devTools: process.env.NODE_ENV !== 'production',
});

ReactDOM.render(
  <Provider store={store}>
    <Style />
    <App />
  </Provider>,
  document.getElementById('root')
);

 

- Redux 스토어를 구성하고 React에 스토어를 제공하는 과정이다,

- configureStore 함수를 사용해 Redux 스토어를 설정한다.

- 이전에 action을 reducer에 전달하고 rootReducer에 정의해줬다. reducer에 rootReducer를 전달해주었다. 이로써, Redux 스토어가 React 상태를 관리할 수 있게 해주었다.

 

homepage.tsx

import { setCurrent } from '../modules/homeSlice';
import { RootState } from '../modules/RootReducer';


export default function HomePage() {
    ---
    const current = useSelector((state: RootState) => state.home.current);
   
    const dispatch = useDispatch();

    useEffect(() => {
        dispatch(setCurrent(location.state?.title));
    }, [dispatch, location.state?.title]);
}

 

- action을 reducer으로 보내기 위해선  dispatch() 를 사용해야한다.

- dispatch함수를 통해 setCurrent의 값을 변경하고 reducer는 이것을 확인하고 store의 상태를 새로 업데이트해준다.