Redux toolkit 까먹었을 때 🙈

boiler plate

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



export default function App() {
  return (

    <Provider store={store}>
	<Home/>
	</Provider>

  );
}

// store
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterReducer';
export default configureStore({
  reducer: {
    counter: counterReducer,
  },
});

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

const initialState = {
  count: 0,
};
export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    setCounter: (state, action) => {
      state.count = action.payload;
    },
  },
  extraReducers: {},
});

export const { setCounter } = counterSlice.actions;
export const selectCounter = (state) => state.counter.count;
export default counterSlice.reducer;

1. 예시는 counter 예시로 한다.

2. useSelector, useDispatch

selectCounter, setCounter에 대해 알아보자.

setCounter는 setState처럼 setter의 역할을 한다.

// useDispatch
// setCounter

...
const dispatch=useDispatch(); // dependencies = react-redux
dispatch(setCounter(1)); // store에서 state를 1로 업데이트 함

selectCounter는 store의 state를 참조한다.

// useSelector
// selectCOunter
...
const count=useSelector(selectCounter); // dependencies= react-redux count는 이제 store의 counterSlice의 state를 참조한다.
console.log(count);
...