React-Redux_기초3 components폴더 및 App.js 코딩

 저번 글과 마찬가지로 Redux에 대한 코딩을 진행하겠습니다. 

이제 components폴더 안에 ToyPart.js를 생성한다. 이것은 React의 components이다. 

import React from 'react';

import { connect } from 'react-redux'; // react, redux연결

import { buyToy, sellToy } from '../Redux'; // toy action 연결

// 위 함수는 App.js에 추가할 component

function ToyPart(props){

// return할 component

return (

<div>

<h2>Number of Toys -{props.numOfToys} </h2>

<button onClick = {props.buyToy}>Buy Toys</button>

<button onClick = {props.sellToy}>Sell Toys</button>

</div>

)

}

// Redux실행시 현재 state에 저장된 기록을 불러옵니다.

const mapStateToProps = (state) => {

console.log('mapStateToProps : ', state);

return {

numOfToys : state,

}

}

// Redux실행시 각 action에 따른 method를 Arrow function에따라 dispatch합니다.

const mapDispatchToProps = (dispatch) => {

return {

buyToy : () => {

dispatch(buyToy());

},

sellToy : () => {

dispatch(sellToy());

}

}

}

// 각파트를 connect를 이용하여 ToyPart components의

// React와 Redux를 연결합니다.

export default connect(

mapStateToProps,

mapDispatchToProps

)(ToyPart);

ToyPart.js에 ToyPart는 App.js에 삽입될 method입니다. 이때 mapStateToProps는 state의 상태를, 전달합니다. 반면 mapDispatchToProps는 해당 액션을 dispatch하여 Redux의 state를 조작합니다. 

마지막으로 connect를 이용하여 ToyPart components에 mapStateToProps, mapDispatchToProps를 연결합니다. 

import { Provider } from 'react-redux'; // store를 App.js전체에 사용하기 위해 필요

import store from './Redux/store'; // 실제 Redux의 store

// components part

import ToyPart from './components/ToyPart';

function App() {

return (

<Provider store = {store}>

{/*Provider로 전체 App을 감싸서 App components

안 어디서든 store에 접근할수 있도록 한다.*/}

<div className = "App">

{/* ToyPart component를 App안에 넣어서

동작시킨다. (Redux Store, Action, Reducer접근 가능)*/}

<ToyPart />

</div>

</Provider>

);

}

export default App;

이제 App.js을 위와같이 수정을 한다. 이전에 dependencies를 설치한 react-redux를 여기서 사용한다. Provider를 App component전체를 감싸고 store를 props로 전달한다. 이는 App component안에 있는 모든 component가 Redux의 store에 접근을 가능하게 해준다.

이제 npm start를 해도 위와같은 에러가 발생하게 된다. 

링크 : 에러발생 원인 및 해결방법

Buy Toys, Sell Toys를 클릭하면 numOfToys의 갯수가 변하는 것을 알수 있습니다. 

이전글 : React-Redux_기초2 Redux 폴더 코딩

다음글 : React-Redux_기초4 새로운 Reducer 및 component생성하기