Redux 편하게 사용하기 ( feat. hooks )

Redux-Actions 라이브러리

redux-action 라이브러리

• 액션 생성함수를 가독성 좋게 작성할 수 있다.
• 리듀서 작성시 swicth/case 문 대신 handleActions 함수를 사용하여 가독성 좋게 작성할 수 있다.

라이브러리 설치

npm i redux-actions

필요한 함수 임포트

import {createActions, handleActions} from 'redux-actions'

액션 생성함수

const INCREASE = 'counter/INCREASE'

export const increaseActionCreater = createActions(INCREASE)

리듀서 함수

const initialState = {
	number : 0,
}

// handleActions({액션업데이트 로직},초기값)
const counterReducer = handleActions({
  [INCREASE]:(state,action)=>({number: state.number + 1}),
  [DECREASE]:(state,action)=>({number: state.number - 1})
},initialState)

export default counterReducer

객체의 key를 [] 안에 넣는 문법은 computed property names (계산된 속성 이름) 이라는 문법으로, 변수를 객체의 키로 사용할 때 사용됩니다.

Payload

increaseActionCreater(payload)

액션 생성함수로 만들어낸 액션을 함수로서 사용하여 파라미터로 값을 넣어주면 payload가 됩니다.

이 라이브러리는 사용시 발생하는 에로사항도 있고해서 현재는 공부하지 않을겁니다. 차라리 리덕스 툴킷을 공부하는게 좋을거같습니다.

---

useSelctor()

useSelector() HOOK는 connect()() 함수의 대체제로서 리덕스 상태조회를 간편하게 살 수 있습니다.

이전에는 Store 의 상태값을 전달받고, 디스패치 함수를 받기 위해서 connect 함수 를 사용하여 스토어에 연동하려면 아래 작업이 필요했습니다.

const Component = (number) => {
  return ...
}

const mapStateToProps = (state) => {//스토어의 상태를 전달받음
  return {// 객체에 상태값 할당하고 반환, 이제 Component 컴포넌트에서 number 라는 props로 상태 값을 넘겨받음
  	number : state.리듀서함수.상태값
  }
}

const mapDispatchToProps = (dispatch) => { //스토어에 디스패치 할 수 있는 dispatch를 매개변수로 전달받음
	return { //디스패치를 실행시켜주는 함수를 담은 객체 반환, 이제 Component 컴포넌트에서 dispatcher 이라는 props를 넘겨받음
    	dispatcher: (id) => {
        	dispatch({type:'액션명', payload:id})
        }
    }
}
/*
connect( 상태에접근할 함수, 디스패치를 받을 함수 )( 컴포넌트지정 ) 
스토어연결, 
mapToStateToProps 함수에 파라미터로 상태값 전달,
props로 스토어의 값 받을 컴포넌트 지정*/
connect(mapToStateToProps,mapDipatchToProps)(Component)

위 작업이 끝나야만 비로소 Store에서 값을 받아볼 수 있었죠.

하지만 useSelector HOOK을 이용하면 간단합니다.

import {useSelector} from 'raect-redux'
const getStoreState = useSelector(state => state.리듀서함수.상태값)

위 문장 하나가 mapStateToProps , connect()(컴포넌트 지정) 을 전부 간소화 시켜주죠. 컴포넌트 지정도 필요없습니다. 바로 값으로 받아서 사용하니까요.

상태 값을 받는것은 알겠고 그럼 디스패치는 어떻게 사용하나요?

---

useDispatch()

useDispatch() HOOK 는 Store의 dispatch()함수를 간단하게 받아올 수 있습니다.

import {useDispatch} from 'raect-redux'
const dispatcher = useDispatch()

사용법
dispatcher(액션)

useSelector : mapStateToProps() 를 대신하는 HOOK
useDispatch : mapDispathcToProps() 를 대신하는 HOOK

따로 connect 함수로 스토어에 연결할 필요가 없습니다. 알아서 해주니까요.

---

useStore()

import {useStore} form 'react-redux'
const store = useStore();
store.getState()
store.dispatch()

위와같이 간단한 방법으로 접근할 수 있지만, 권장하지 않습니다.

---

Connect 와 Hooks 를 사용한 것의 차이점

connect : 이 함수를 사용하여 컨테이너 컴포넌트를 생성하면, 컨테이너 컴포넌트의 부모 컴포넌트가 리렌더링 될 때, 컨테이너 컴포넌트의 props가 변경되지 않았다면 리렌더링이 자동으로 방지되어 성능 최적화를 알아서 해줍니다.

hooks : useSelector() 를 사용하여 상태를 조회했을 때는 최적화 작업을 React.memo() 를 컨테이너 컴포넌트에 사용해주어 최적화를 수동으로 해주어야합니다.