(3.2) Implementing React_ Redux & HTTP. 영어쌤이 만드는 회원가입, 인증[CRUD] 만들어욤! 리액트와 파이썬 장고

Implement Redux

바로 시작해 볼까요?
이전 포스팅의 마지막엔 Axios를 설치했습니다. 이번 장에선 그 axios를 활용할 것 입니다.

(14) /src/actions/leads.js 파일 작성

- axios를 활용하여 asynchronous request(비동기 요청)을 만들 것 입니다.

// lead.js axios 활용예정
import axios from 'axios';

import { GET_LEADS } from './types';

// GET LEADS
export const getLeads = () => {
	
}

잠시 후 활용하게 될 주소 // 포스트맨

- dispatch라는 것을 사용할 것 입니다.
- lead.js 파일로 돌아가서 나머지를 작성해 줍니다. 이렇게 action 이 만들어 집니다.

// lead.js axios 활용예정
import axios from 'axios';

import { GET_LEADS } from './types';

// GET LEADS
export const getLeads = () => dispatch => {
	axios.get("/api/leads/")
    	.then(res => {
        	dispatch({
            	type: GET_LEADS,
                payload: res.data
            });           
        })
        .catch(err => console.log(err));
};

- 그리고이 action을 어떻게 호출할까요?
- leads components로부터 호출할 것 입니다.

(15) /src/components/leads/Leads.js

- 다른 컴포넌트들과 함께 redux를 사용하기 위해선 connect 라는 명령어를 코드 내에서 사용하여야 합니다.
- react-redux package의 기능입니다.
- 다음과 같이 Leads.js 파일을 작성해 주세요.

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { getLeads } from "../../actions/leads";

export class Leads extends Component {
	static propTypes = {
    	leads: PropTypes.array.isRequired
    };
    
    render() {
    	return (
        	<div>
            	<h1>Leads List</h1>
            </div>
        );
    }
}

const mapStateToProps = state => ({
	leads: state.leads.leads
});

export default connet(mapStateToProps)(Leads);

- 작성을 완료하고 저장을 한 뒤 크롬 Redux로 확인해 보아요!
- UI에선 딱히 바뀐게 없어 보입니다.

(16) Redux tool // Leads.js에 leads를 호출하는 코드 작성하기

- 이제 크롬의 Redux 툴로 확인해 보면 State 탭의 Tree 항목을 볼 수 있습니다.

- 질문! Request를 만들었는데 왜 우리는 django에 있는 leads를 볼 수 없는 거죠?
- 답변: 지금까진 getLeads를 만들었지 그것을 호출하는 코드는 아직 작성하지 않았습니다.

- 그리고 Leads.js 파일에 호출하는 코드를 작성합니다.

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { getLeads } from "../../actions/leads";

export class Leads extends Component {
	static propTypes = {
    	leads: PropTypes.array.isRequired
    };
    
    componentDidMount() {
    	this.props.getLeads();
    }
    
    render() {
    	return (
        	<div>
            	<h1>Leads List</h1>
            </div>
        );
    }
}

const mapStateToProps = state => ({
	leads: state.leads.leads
});

export default connet(mapStateToProps, { getLeads })(Leads);

- 위와 같이 호출하는 코드의 작성도 마치면 다음과 같이 redux tool 에서도 leads 에 대한 정보(포스트맨에서 봤던 것) 확인이 가능합니다.

결과

이쯤에서 끊고 다음으로 넘어가 볼까요?

다음 포스팅(3.3) 에선 Leads.js에 코드를 더 추가하여 브라우저상에도 볼 수 있게 해 줄 것 입니다.

Stay tuned for the next episode of Web development by the English teacher JOHNNYCLUB!!!