React_Redux 사용법(실전)

*REDUX FLOW

: dispatch -> ACTION(type, action 기입) -> REDUCER((previousState, action)=>nextState) -> STORE

 

[[ ex. 로그인 기능 구현 ]]

1. // src/components/LoginPage.js 파일

: dispatch ( action명 ( variable명 ) ) 를 한다.

ex ) dispatch(loginUser(body)) : "body" variable을 가지고 "loginUser"라는 action을 할거다.

       (loginUser는 _actions 폴더에서 불러온 것)

import {useDispatch} from 'react-redux'
import {loginUser} from '...../_actionss/uwer_actions'

const dispatch=useDispatch();

const onSubmit = ()=>{
	let body={
    	email:Email,
        password:Password
    }
    
    dispatch (loginUser(body))
    	.then(response=>{
        	if(response.payload.success){
            	.....
            }else{
            	alert(' ')
            }
        })
}

: 추후에 dispatch > action > reducer를 거쳐서, response.payload(=server의 response) 내용을 가져올 수 있다.

   이걸로 useState에 setting 한다.

: 여기서 response.payload는 action.payload(success:true, data)를 말한다.

: action.payload에 server에서 보낸 json Data를 가지고 있는 것이다. (reducer에서 'loginSuccess'에 담아 state에 저장한 것과는 관계 없다)

 

2. // _actions 폴더 ( type.js, _action.js 2가지 종류의 파일을 관리 )

 1) type.js 파일

      : action의 <type명> 관리

        ex)

export const LOGIN_USER = 'login_user';
export const REGISTER_USER = 'register_user';
....

 

 

 2) 액션.js 파일 (ex. user_actions.js, comment_actions.js ....)

      : 액션을 담고 있는 function 각각에 <type>과 <action>을 작성한다.

    ex)

import axios from 'axios';
import { LOGIN_USER, REGISTER_USER } from './types';

export function registerUser(dataToSubmit){
    const request = axios.post(`/api/users/register',dataToSubmit)
        .then(response => response.data);
    
    return {
        type: REGISTER_USER,
        payload: request
    }
}

export function loginUser(dataToSubmit){
    const request = axios.post('/api/users/login',dataToSubmit)
                .then(response => response.data);

    return {
        type: LOGIN_USER,
        payload: request
    }
}

   a. type :  type.js에서 불러와서 작성

   b. payload : 'payload' 부분이 시행할 '액션'임. (기존에 component에서 직접하던 'axios'를 action에서 하는 것임)

       : payload에는 axios로 server에 정보를 보낸 후, server에서 받은 response(ex. success:true) 정보까지 담고 있다.

 

 

3. // _reducers 폴더 (index.js, _reducers.js 2가지 종류의 파일 관리)

  1) index.js 파일

      : 모든 reducer들을 combine해서 'rootReducer'로 관리한다.

            (이 rootReducer는 react app을 관리하는 index.js에 불러와서 app과 redux를 연결할 때 사용한다.)

    ex)

import { combineReducers } from 'redux';
import user from './user_reducer';

const rootReducer = combineReducers({
    user,
});

export default rootReducer;

 

  2) _reducers.js 파일 (ex. user_reducers.js, comment_reducers.js...)

    : switch문을 이용해서 'type'별(=case별)로 previousState과 action을 작성한다.

    :  이 때, export default(단일 내보내기)해서 ./index.js 에서 한번에 불러올 수 있도록 한다.

 

  ex)

import {
    LOGIN_USER,
    REGISTER_USER
} from '../_actions/types';
 

export default function(state={},action){
    switch(action.type){
        case REGISTER_USER:
            return {...state, register: action.payload }
        case LOGIN_USER:
            return { ...state, loginSucces: action.payload }
            
        default:
            return state;
    }
}

  a. previousState : 'state={ }' parameter로 쓴다. / 빈 상태의 state 라는 뜻이다. /

                          switch 문의 '...state'는 'state={ }' parameter를 그대로 가져온다는 의미다.

  b. action : action의 payload란, _actions 파일에서 'payload'에 가져온 data다. 

  c. nextState : previousState와 action parameter로, case별(=type별) nextState를 return 한다.

                    : REDUX chrome 확장프로그램에서 server의 response 내용을 확인할 수 있다.

                    : 확장프로그램의 state 탭에서 'loginSuccess' 줄에 action.payload(=response.data)가 작성될 것이다.

 

 

 

**useSelector와 useDispatch를 이용한 쉬운 예

https://velog.io/@katanazero86/React-redux-%EC%85%8B%ED%8C%85-%EB%B0%8F-%EC%82%AC%EC%9A%A9