리덕스 기초

리덕스?

store를 두어 관리하고 중앙 집중관리체계를 유지

리덕스는 단 하나의 단일 스토어를 유지한다.

 

리덕스를 해야 하는 이유

컴포넌트간의 의존성을 낮추고 각자의 비즈니스 로직(컴포넌트)에 집중하기 위해서
예를들어 리덕스를 사용하지않을경우 코드가 복잡해짐에따라 서로의 연관성 또한 복잡하게되므로 수정이 필요한상황에 모든 컴포넌트들을 일일이 수정해야함

 

리액트에서의 리덕스

앱전체에서 데이터를 자주 전달하게되는건 모두알고있다.

기존에 리액트 컴토넌트단에서 useState hook을 사용하였는데 컴포넌트 내에서 상태관리는 가능하지만

전역에서 상태관리를 하게될경우 리덕스의 필요성이 느껴진다.

리덕스를 사용하게되면 어느 컴포넌트든 자유롭게 가져올수있게된다.

리덕스 설치

리덕스를 사용하기위해 크게 2가지 방법이있다.

react-redux

npx create-react-app my-app --template redux

위의 방법은 아직은 어렵기때문에 create-react-app을 한뒤에 아래처럼

react-redux를 추가한뒤 상태관리방법을 배운다.

npx create-react-app 프로젝트명
yarn add redux react-redux node-sass styled-components

redux, react-redux 2개의 모듈과 스타일관련 모듈설치

리덕스 용어

일단 리덕스는 단방향이라는 점만 알고넘어가자

리덕스를 배우려면 여러가지 용어들이 튀어나오게되는데 당장 모두 알려하기보다는 차차익숙해지도록한다.
1. dispatch 함수를 실행하면
2. action이 발생
3. reducer가 전달하면
4. 최종적으로 state상태를 바꾼다.

 

상태체크해주는 유용한 크롬개발도구

개발도구를 쓰기위해서는 아래 코드가 필요함

const devTool = 
  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

const store = createStore(
  rootReducer,
  devTool
  )
//console.log(store.getState())

https://github.com/reduxjs/redux-devtools/tree/main/extension#installation

GitHub - reduxjs/redux-devtools: DevTools for Redux with hot reloading, action replay, and customizable UI

리덕스 예시

폴더 예시

먼저 폴더와 파일들을 생성한다.

user.js

//디스패치 함수를 통해서 액션을 불러온다
//액션은 리듀서를 호출한다
//리듀서는 최종적으로 스토어를 변경시킨다

//액션타입(문자열)
const USER_LOGIN = 'user/LOGIN';
const USER_LOGOUT = 'user/LOGOUT'
//액션생성함수
export function LOGIN({email,password}){
    return{
        type:USER_LOGIN,
        payload:{
            email,
            password,
        },

    }
}
export function LOGOUT(){
    return{
        type:USER_LOGOUT,
    }
}

//초기상태
const initialState = {
    // email:null,
    // password:null,
    user:null
}

//리듀서
export default function user (state = initialState, action){
    switch(action.type){
        case USER_LOGIN:
            return{
                ...state,
                // email: action.payload.email,
                // password: action.payload.password,
                user:action.payload
            }
        case USER_LOGOUT:
            return{
                ...state,
                user:null
            }
        default:
            return state
    }
}

 

index.js

import { combineReducers } from "redux";
import user from './modules/user'

export default combineReducers({
    user//서브리듀서
})

 

app.js

user의 initialState(초기값)은 null이다. user 값(payload 즉 이메일과 비밀번호)이 있으면 <로그아웃/>페이지가 나오고 없으면 <로그인/>화면이 나온다

 

스토어의 값을 확인해보려면

console.log(store.getState())

스토어 값(유저값이 없을때)