1. 함수형 컴포넌트에서 Redux state, dispatch 가져다쓰기

며칠 전 들었던 노마드코더 강의 내용은 함수형 컴포넌트의 훅을 사용하지 않았었다(아마 강의 촬영이 좀 전이라 그런 듯 ㅠㅠ). 예를 들면 connect
노마드코더 리덕스 무료 강의

함수형 컴포넌트에서 state 가져다쓰기: useSelector

• 리덕스에서 제공하는 hook!

const FunctionalComponent = () => {
  const exampleState = useSelector(state => state.example)
  
  return <div>{exampleState}</div>
}

• 특징
  1) connect 필요 없음
  2) 자동으로 해당 컴포넌트를 구독함
  3) state 객체의 일부 프로퍼티(들)만 가져올 수 있음
  4) 가져온 프로퍼티가 바뀔 떄에만 컴포넌트가 re-rendering됨

함수형 컴포넌트에서 dispatch: useDispatch

• 마찬가지로 리덕스에서 제공하는 hook!

const FunctionalComponent = () => {
  const dispatch = useDispatch();
  const dispatchFunc = () => {
    dispatch({type: "increment"})
  }
}

• 특징
  1) connect 필요 없음
  2) dispatch 인자인 action 객체 안에는 적어도 type(key)의 프로퍼티가 들어있어야 하며, 필요에 따라 다른 프로퍼티도 추가 가능

2. Redux-toolkit: createSlice

store와 reducer 코드 작성을 간소화할 수 있다.

const counterSlice = createSlice({
  name: "counter", // reducer 이름
  initialState: {
    counter: 0,
    showCounter:true,
  }, // 초기화
  reducers: { // reducer들. 메서드 형태. 메서드 이름이 action.type
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    },
    increase(state, action) {
      state.counter = state.counter + action.amount;
    },
    increment(state) {
      state.showCounter = !state.showCounter;
    },
  }
})

const store = configureStore({
  reducer:counterStore.reducer
})

• 특징
  1) state를 mutate할 수 있다.(실제로는 내부적으로 immutable하게 적용해줌)
  2) 위 때문에, 꼭 전체 객체를 적어줄 필요가 없이 바꿀 프로퍼티만 조작하면 된다. 그리고 return할 필요가 없다.
  3) action.type만 필요했다면 action을 아예 안가져와도 된다. 메서드 자체로 이미 구별되기 때문에!
  4) return하는 객체의 프로퍼티: reducer, actions