React_REDUX-로그인페이지(submit)

1. dispatch

dispatch(loginUser(body))    

            .then(reponse=> {

                if(reponse.payload.loginSuccess){

                    props.history.push('/')

                }else{

                    alert('Error')

                }

            })

 

 

 dispatch를 통해 body를 인자로, loginUser라는 action(function)을 취함 

 

2. action(function) 선언

-user_action.js파일-

 

import{

    LOGIN_USER

} from './types';              //types : type을 관리하는 파일 / user_reducer.js, user_action.js 모두 types.js에서 type을 import

 

export function loginUser(dataToSubmit (=body)){

    (1) const request = axios.post('/api/users/login', dataToSubmit)

    (2)    .then(reponse => reponse.data )

    

    return {

    (3)  type:LOGIN_USER,

    (4)  payload: request

    }

}

 

1. body(email, password)를 mongoDB에 보낸다.

2. mongoDB에서 보낸(reponse) data를 request에 저장한다.

3. type > types.js 파일의 LOGIN_USER 로 설정

4. payload에 request 저장 (이것을 reducer에 보냄)

 

 

3. REDUCER에서 ACTION 가져오기

-user_reducer.js-

 

export default function ( state={}, action ) {           // state={} = previousState  ( {} : 빈 상태를 말함)

    switch (action.type) {

        case LOGIN_USER:

            return { ...state, loginSuccess:action.payload}     

            break;

    

        default:

            return state;

    }

}

 

 

// ... : Spread Operator ; 특정 객체 or 배열 값(여기서는 state)을 복제

 

1. (previousState, action) => (state={} , action)이고

2. type이 (action.type = LOGIN_USER) 인 ACTION에 대해서

3. state, action(payload에 loginSuccess를 입력함) 을 return하고

4. error일 경우 / state={} 로 return한다.

 

 

****** reducer 관리 ******

:  _reducers > index.js  파일에서 관리

 

import { combineReducers } from 'redux';

import user from './user_reducer';

 

const rootReducer = combineReducers({

    user  (=user_reducer)

})

//여러가지 REDUCERS를 rootReducer를 통해 하나로 묶어주는 것

 

export default rootReducer;