TIL - redux toolkit (createSlice/useSelector/useDispatch/combineReducers/configureStore)

combineReducers

여러 리듀서를 하나로 합친다

import { combineReducers } from 'redux';

import claimsReducer from './claimsSlice';
import inviteReducer from './inviteSlice';

export default combineReducers({
  claims: claimsReducer,
  invite: inviteReducer,
});

configureStore

middleWare가 장착된 store를 생성하여 state, API 관리 등을 해줄 수 있다.

import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './rootReducer';

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

createSlice

보일러플레이트를 걷어내서 편하게 action, type등을 쓸수 있음

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

const initialState = { //초기값
  receipts: null,
};
//createSlice
const { actions, reducer } = createSlice({
  name: 'claims',
  initialState,
  reducers: {
    setReceipts: (state, { payload: receipts }) => 			({
   		   ...state,
  		    receipts,
  		  }),
 	 },
});

export const { 
  //액션 내보내기 
  //-> 내보낸 액션은 다른 곳에서 dispatch(액션(값))해서 스토어 값 변경에 씀
  setReceipts,
} = actions;

export default reducer;

스토어 바인딩

생성한 스토어를 import해서 Provider에 연결한다.
툴킷은 기본으로 devtool 제공해준다

import { Provider } from 'react-redux';
import store from './redux/store';
import Router from './Router';

export default function App() {
  return (
    <Provider store={store}>
      <Container>
        <Router />
      </Container>
    </Provider>
  );
}

useSelector

connect함수를 이용하지 않고 리덕스의 state를 조회할 수 있다.

import { useSelector } from 'react-redux'
const user = useSelector(state => state.user);

useDispatch

생성한 action을 useDispatch를 통해 발생시킬 수 있다
만들어둔 액션생성 함수를 import한다.

import { change_user } from '../modules/user'
import { useDispatch } from 'react-redux'

const User = () => {
  ...
  const dispatch = useDispatch();
  dispatch(change_user(user));
  ...
}