React - 함수형 컴포넌트에서 Redux와 연결하기

TL:DR

초보입니당

useSelector / useDispatch를 사용한다.

1. Redux: 개념

js앱을 위한 상태 컨테이너
==> 전역적 변수 / 함수 등을 설정할 때 사용

React에만 적용할 수 있는 패키지 X => Vue.js / React / Vanilla.js 모두 가능 (!!)

2. Redux: 연결하기 (Basic)

구글신에게 2일동안 매달리며 물어봤는데 함수형 컴포넌트 예제를 도저히 못찾아서..;; 결과적으로는 내가 잘못 물어본거였지만 (;;)

우선 useSelector와 useDispatch를 불러와서 적용하면 간단하게 설정이 가능하다.
처음에는 useState랑 연결해서 써야하는줄 알고 난리를 쳤는데, 결과적으로는 아님.

예제: 클릭하면 count값 1씩 증가

	// actions/counter.js

	export const COUNT = "COUNT";

	export const count = () => {
      return {
        type: COUNT
      }
    }

	// reducers/counterTest.js

	// load actions

	import * as counter from "../actions/counter";
	
	// set initial state
	// 예제처럼 변수로 빼도 되고, 그냥 바로 적어도 무관

	const initialState = {
    	count: 0
    }
    
    // reducers
    
    const reducers = (state = initialState, actions) => {
      // state에 대한 params 값을 initialState로 초기화
      // actions는 actions/counter.js에서 return한 값이 들어옴
      
      
      const { type } = actions;
      
      switch(type) {
          
        case counter.COUNT: {
          return {
          	...state, // 다른 state값이 있을 경우에 대비. 이 예제에서는 없어도 무관
            count: state.count+1
          }
        }
        default: {
        	return {
            	...state
            }
        }
          
      }	
    }
	

	// store/index.js

	import { createStore } from "redux";

    const create = (reducers) => {
        return createStore(reducers);
    }

    export default create;