[Redux]

Redux?
상태 관리 라이브러리

Redux => state를 관리하는 툴

• Props
  • properties
  • 컴포넌트 간 주고 받을 때 props이용
    • 컴포넌트에 전달 
    • <ChatMessages message={message} currentMember={member} />
  • 소통방식
    • 부모 컴포넌트에서 자식 컴포넌트로 보냄
  • 불변성 (immutable)
    • 변경하려면 부모에서 먼저 변경 후 보내줘야 한다.
• State
  • 컴포넌트 안에서 데이터 교환 및 전달을 하려면 state 이용
    • state = {  message: ' ', attachFile: undefined, openMenu: false,  };
  • 변형 (mutable)
    • 컴포넌트 안에서 관리된다. (변수 처럼)
  • 변경이 되면 리렌더링되는 성격
• 특징
  • 스토어라는 개체 내부에 상태를 담게 된다.
  • 스토어에서 모든 상태가 일어난다.

 

Redux data Flow?
(strict unidirectional data flow)
Component > dispatch(action) > Action > Reducer > Store > Component

• dispatch

  • // dispatch
    
    import { useDispatch } from "react-redux";
    
    function LoginPage() {
        const dispatch = useDispatch();
        
        let body = {
            email: Email,
            password: Password
        }   
        
        dispatch(LoginUser(body)).then((response) => {
           ...
       }
    });

•  Action
  • 객체로 이루어져 있다.
  • 무엇이 일어났는지 설명
  • 스토어에 운반할 데이터

  • // Action
    
    { type: 'LIKE_ARTICLE', articleId: 42 }
    { type: 'FETCH_USER_SUCCESS', response: { id: 3, name: 'Mary' } }
    { type: 'ADD_TODO', tex: 'Read the Redux docs.' }
    
    // Project_Action
    // user_actions.js
    
    export function loginUser(dataToSubmit) {
        const request = axios
            .post(`${USER_SERVER}/login`, dataToSubmit)
            .then((response) => response.data);
            
        return {
            type: LOGIN_USER,
            payload: request,
        };
    }

• Reducer
  • 액션을 함으로 인해 state값이 변했다.
  • 액션(주문서)을 보고 스토어의 상태를 업데이트 한다.
  • 이전 state와 action object를 받은 후 next state를 return 한다.

  • // reducer
    
    // (previousState, action) => nextState
    
    // Project_Reducer
    // user_reducer.js
    
    export default function (state = {}, action) {
        switch(action.type) {
            case LOGIN_USER:
                return {
                    ...state,
                    loginSuccess: action.payload,
                };
                break;
            ...
            
            ...
            
            default:
                return state;
            }
        }

• Store
  • 전체적인 어플리케이션의 state을 감싸주는 역할
  • 스토어 내 메소드를 이용해 state관리
  • store 생성 방법