TIL: 리덕스를 들어오다.

리덕스란?

우리가  부모 컴포넌트로부터 자식 컴포너트로 , 자식의 자식 ... 자식의 자식의 자식....  
으로 상태를  전달하는 패턴인  props-drilling 이  발생하지 않게 합니다.
말 그대로  전역해서 관리하게 해줍니다.

 

 

 

리덕스 흐름 살펴보기

   

예를 들어서  카운터를 생각해봅시다.

 

1.  < 1 증가시키기 > 버튼을 클릭

 

2. . 내가 클릭한 행위(=액션) 가 Reducer 함수에 들어감

 

3.  <1 증가시키는 액션 함수> 가 실행됨  , 상태값이 Store에 전달됨 

 

4.  UI의  값이  변경됨 

---

리덕스 설치하기 ( feat. 리액트 ) 

 

# 다음 명령어를 통해 리액트 프로젝트를 설치합시다.
> npx create-react-app my-app

# 그 다음 명령어로 통해 리덕스를 구축하는데 필요한 패키지를  설치합니다.
# 리덕스도 npm 을 통해 설치되므로 노드 모듈이라 할수 있겠습니다.
npm install redux
npm install react-redux

 

설치할때  패키지 두개를 따로 설치할 필요 없이 같이 설치할 수 있습니다.

 

 

리덕스 구조 구축하기

 

[ 1 ]  리덕스  저장소 생성하기 

import { createStore, combineReducers } from "redux";


// reducer가 반환한 값을 하나의 상태 객체로  만들어주는  combineReducers 메서드
const rootReducer = combineReducers({
  // 생성한 리듀서가 들어간다.
});

// 리덕스 저장소를 만들어주는 메서드 createStore 메서드
const store = createStore(rootReducer);

export default store;

 

[ 2 ]  저장소와 연결시킬 모듈 생성하기

// 초기값 세팅
const initialState = 0;

// 액션 변수
const ADD_COUNT = 'count/ADD_COUNT';



// 액션 함수
export const addCount = (payload) =>{
    return{type:ADD_COUNT , payload }
}


// 리듀서

// 더하기 버튼 클릭 -> 액션 함수로 전달 ->  리듀서에서 더하는 행위 실행
export const counter = (state =initialState , action)=>{
    switch (action.type) {
        case ADD_COUNT:
            return state + 1;
    
        default:
            return state;
    }
}

 

 

[ 3 ]  리액트 프로젝트에 적용해보기 

import './App.css';
import {useDispatch, useSelector} from  'react-redux';
import { addCount } from './store/modules/counter';

function App() {

  const state = useSelector((state)=>(state.counter));
 
  // 행동을 인지해서 리덕스 리듀서로 넘겨주는 디스패치
  const dispatch = useDispatch();

  
  const raiseWonCountButtonClick = () =>{
    dispatch(  addCount());    
  }


  return (
    <>
    <h1>카운터 프로그램</h1>
 
     <p>{state}</p>
     <button onClick={()=>{raiseWonCountButtonClick()}}>
        1 더하기
     </button>
    </>
    
  );
}

export default App;

 

 

내가  자주하던 실수 ....

// 이렇게  해서 리덕스에서 인지를 못해줌. 이것가지고 30분 해맴
const raiseWonCountButtonClick = () =>{
     addCount();    
  }

 

리덕스에 반영이 잘되었느지 보고싶다면...

 

 

[ 1 ] 크롬에서 리덕스  개발자 도구를 설치합니다. 리덕스  개발자 도구를 사용하여야 합니다. 그리고 다음 명령어도 설치해주어야 합니다.

npm install @redux-devtools/extension

import { createStore, combineReducers } from "redux";
import { counter } from "../modules/counter";
import {composeWithDevTools} from "@redux-devtools/extension"

// reducer가 반환한 값을 하나의 상태 객체로  만들어주는  combineReducers 메서드
const rootReducer = combineReducers({
  // 생성한 리듀서가 들어간다.'
  counter  
});

const devTools = window.__REDUX_DEVTOOLS_EXTENSION__;

// 리덕스 저장소를 만들어주는 메서드 createStore 메서드
const store = createStore(rootReducer ,devTools&&devTools() );


export default store;

 

[ 2 ]  다음과 같이     F12 키 눌러서  redux로 이동하기 

 

 

[ 3 ] use local server  들어가서  hostname 과 port 입력해주고 Connect 하기 (해주어얌) 

 

[  4 ]  그러면  다음과 같이  1이 증가하는지  하지 않는지  인지 할 수 있습니다.

 

 리덕스 폴더 구조

 

 

config :  리덕스 스토어가 들어갑니다.

modules :  리덕스 리듀서가 들어갑니다.

 

 

 

 

나는  기존 state로 상태를 관리하다가  redux로  들어오면서  
지속적인 프롭스 드릴링의  문제에서
벗어나서 너무 좋았다.