React | React-Redux 비동기 통신(fetch / redux-thunk)

1. Action, Reducer 작성

 

fetch를 사용하기 위해서 우선 npm을 이용해 isomorphic-fetch를 install해줍니다.

$ npm install isomorphic-fetch

action 생산자는 아래와 같이 작성해주었습니다.

import fetch from 'isomorphic-fetch';
import * as type from '../constants/actionTypes';

export const userSignUp = (signUpInfo) => {
    return dispatch => {
        fetch("http://localhost:3002/users/signUp", {
            method:'post',
            headers: {'Content-Type': 'application/json; charset=utf-8'},
            body: JSON.stringify(signUpInfo)
        })
        .then(res => res.json())
        .then(data => {
            if(data.result === "success"){
                dispatch(userSignUpResult(true));
            }
        })
        .catch(error => dispatch(userSignUpResult(error)))
    }
}

export const userSignUpResult = (result) => {
    return {
        type: type.USER_SIGN_UP_RESULT,
        result
    }
}

 

리듀서입니다.

import * as type from '../constants/actionTypes';

const userStates = {
    users: [],
    signUpResult: null
};

const userReducer = (state = userStates, action) => {
    switch(action.type){
        case type.USER_SIGN_UP_RESULT:
            return {...state, signUpResult:action.result}
        default:
            return state;
    }
}

export default userReducer;

 

 

2. Store에 thunk미들웨어 추가

import {createStore, applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
import logger from 'redux-logger';
import rootReducer from './reduecers/index';

const store = createStore(rootReducer, applyMiddleware(logger, thunk));

export default store;

 

 

3. 서버 라우트 작성

 

+) 프록시설정 및 CORS설정도 해주었습니다.

2020/01/13 - [STUDY/React.js] - React | Node.js와 React 연동하기 (+ CORS 에러 해결하기)

const express = require('express');
const router = express();
const bodyParser = require('body-parser');

router.use(bodyParser.json());
router.use(bodyParser.urlencoded({ extended: false }));

router.post('/signUp', (req, res) => {
    console.log('users/signUp ', req.body);
    res.send({result:"success"});
});

module.exports = router;

 

 

4. 컴포넌트 작성

 

import React, { useState, useEffect } from 'react';
import { connect } from  'react-redux';
import * as action from '../../redux/actions/userActions';

const SignUp = ({userReducer, userSignUp}) => {
    const [ id, setId ] = useState("");
    const [ password, setPassword ] = useState("");
    const [ name, setName ] = useState("");
    function onChangeId(e) {
        setId(e.target.value);
    }
    function onChangePassword(e) {
        setPassword(e.target.value);
    }
    function onChangeName(e) {
        setName(e.target.value);
    }
    function onSubmit(e) {
        e.preventDefault();
        const signUpInfo = {
            id: id,
            password: password,
            name: name
        }
        userSignUp(signUpInfo);
    }

    return (
        <>
            <h1>SignUp.js</h1>
            <form>
                <input type='text' name='id' value={id} onChange={onChangeId} placeholder='ID를 입력하세요'/>
                <input type='password' name='pwd' value={password} onChange={onChangePassword} placeholder='비밀번호를 입력하세요'/>
                <input type='text' name='name' value={name} onChange={onChangeName} placeholder='이름을 입력하세요'/>
                <button onClick={onSubmit}>SIGN UP</button>
            </form>
        </>
    );
}

const mapStateToProps = state => {
    return state;
}
const mapDispatchToProps = dispatch => {
    return {
        userSignUp: (signUpInfo) => dispatch(action.userSignUp(signUpInfo))
    }
}
export default connect(mapStateToProps, mapDispatchToProps)(SignUp);

 

 

 

5. 결과

 

 

 

 

 

+) 참고

비동기 액션 · Redux