라벨이 Redux인 게시물 표시

React-Redux_기초6 객체를 Redux store에 저장하기

이미지
지금까지는 react-redux store에 숫자로만 조작을 하였지만 이번에는 데이터, 즉 객체 데이터를 넣도록 하겠습니다.  먼저 저번과 마찬가지로 Action, Reducer, Types 3개를 resume 폴더안에 말들어줍니다. export const ADD_RESUME = "ADD_RESUME" ; // 이력서를 지원하기 위한 타입 입력 먼저 resumeTypes.js에 위 코드를 작성해 줍니다. import { ADD_RESUME } from './resumeTypes' ; export const addResume = ( resume = { Name : '' , Email : '' }) => { return { type : ADD_RESUME , payload : resume } } 이제 액션부분을 resumeAction.js부분에 코딩을 해줍니다. 여기서 cookie파트와 비슷하면서 다른점이 있습니다. 인자를 받지만 이번에는 객채를 받습니다. 키값이 Name, Email로 구성된 객체를 받습니다. 이것은 payload에 전달되서 reducer에 보내기게 됩니다. // resumeTypes에서 이력서 지원 타입을 받아온다. import { ADD_RESUME } from './resumeTypes' ; // 지원자의 이름과 이메일을 state로 저장한다 const initialState = { resume : { Name : '' , Email : '' } // 초기 이력서는 빈공간 }; // cookieReducer는 이전 toyReducer와 달리 payload에 따라 수량이 변화한다. const resumeReducer = ( state = initialState , action ) => ...

React-Redux_기초5 새로운 component생성하고 React실행

이미지
import { React , useState } from 'react' ; import { connect } from 'react-redux' ; // react, redux연결 import { buyCookie , sellCookie } from '../Redux' ; // toy action 연결 // 위 함수는 App.js에 추가할 component function CookiePart ( props ){ // number의 변수를 바꾸기 위한 useState사용 const [ number , setNumber ] = useState ( 1 ); console . log ( 'Cookie(props) : ' , typeof props , props ); console . log ( 'Cookie(props.numberOfCookie) : ' , typeof props . numOfCookie , props . numOfCookie ); // return할 component return ( < div > < h2 > Number of Cookies - { props . numOfCookie } </ h2 > { /* input에 숫자를 입력하여 사고팔때의 쿠기수량을 조절합니다. */ } < input type = 'text' value = { number } onChange = { e => setNumber ( e . target . value ) } /> < button onClick = { () => props . buyCookie ( number ) } > Buy { number } Cookies </...

React-Redux_기초4 새로운 Reducer 생성하기

이미지
이번에는 Cookie를 판매하는 파트를 Redux를 이용하여 만들도록 하겠습니다.    일단 위의 폴더에서 CookiePart.js component와 cookie폴더가 추가 되었습니다. 2개의 component는 구조가 비슷하지만 toy와 달리 CookiePart component는 구입, 판매 수량을 조절할수 있습니다. 이제 toy폴더와 같이 3개의 js파일(cookieAction.js, cookieReducer.js, cookieTypes.js)을 생성합니다.  export const BUY_COOKIE = "BUY_COOKIE" ; // 쿠기를 사기위한 타입 입력 export const SELL_COOKIE = "SELL_COOKIE" ; // 쿠기를 팔기위한 타입 입력 cookieType.js파일을 위와같이 코딩해 줍니다. import { BUY_COOKIE , SELL_COOKIE } from './cookieTypes' ; export const buyCookie = ( num = 1 ) => { return { type : BUY_COOKIE , payload : num } } export const sellCookie = ( num = 1 ) => { return { type : SELL_COOKIE , payload : num } } 이제 cookieAction.js 부분도 위와같이 코딩을 해줍니다. 다만 이전 toyAction.js와 다른점은 함수인자가 추가된 것입니다. cookie부분은 사용자가 판매, 구매 수량을 조절할수 있게 하기 위해서 num인자를 추가했습니다. 하지만 인자가 추가되지 않는 상황을 대비하여 숫자가 들어오지 않을시 default value를 1로합니다.  // cookieTypes에서 구매와 판매 타입을 받아온다. impor...

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 ) => { ...

React-Redux_기초2 Redux 폴더 코딩

이미지
 이제 React안에 Redux를 사용할수 있도록 코딩하도록 하겠습니다.  위 사진과 같이 Redux폴더 안에 toy라는 폴더를 생성하고 3개의 파일을 만듭니다. 이전에 작성한 글처럼 toy에 관련된 Types, Action, Reducer를 이용합니다. export const BUY_TOY = "BUY_TOY" ; // 장난감을 사기위한 타입 입력 export const SELL_TOY = "SELL_TOY" ; // 장난감을 팔기위한 타입 입력 toyTypes.js은 BUY_TOY, SELL_TOY에 문자열을 변수로 입력하고 export합니다. import { BUY_TOY , SELL_TOY } from './toyTypes' ; // 장난감을 사기위한 액션 export const buyToy = () => { return { type : BUY_TOY }; }; // 장난감을 팔기위한 액션 export const sellToy = () => { return { type : SELL_TOY }; }; toyAction.js에는 toyTypes.js에서 BUY_TOY, SELL_TOY를  import해서 액션에 사용합니다. 액션은 2가지 buyToy, sellToy로 이루어 집니다.  import { BUY_TOY , SELL_TOY } from './toyTypes' ; // toyTypes에서 구매와 판매 타입을 받아온다. const initialState = { numOfToys : 20 // 초기 장난감 진열 갯수는 20개 }; const toyReducer = ( state = initialState , action ) => { switch ( action . type ){ case BUY_TOY : // 가게에서 ...

React-Redux_기초1 React생성, Redux 폴더 생성, dependencies설치

이미지
 안녕하세요. 알렉스 입니다. 저번에 Redux 단독으로만 사용 했지만 이번에는 React와 Redux을 갖이 사용하도록 하겠습니다. 설치법 :  https://engineeringshw.blogspot.com/2021/03/react-installation.html 위 설치법을 진행했다는 가정하에 Redux 폴더를 배치하도록 하겠습니다. 위 사진처럼 src의 하위 폴더에 components, Redux폴더를 생성해 줍니다. 위 방법은 딱히 정해진 방법이 아닙니다. 자유롭게 변경 하셔도 됩니다. 터미널에 '$ npm i redux react-redux'로 입력을 합니다. package.json파일을 확인하고 redux, react-redux가 dependencies에 있는지 확인합니다. 이렇게 하면 이제 react환경 안에서 redux를 사용할수 있습니다. 그럼 다음에는 본격적으로 components와 Redux폴더 안에 파일들을 생성하고 코딩을 하도록 하겠습니다. 다음글 : React-Redux_기초2 Redux 폴더 코딩 참고글 : Redux - 개념

Redux - axios,fetch을 통한 action

이미지
  이전에 작성한 글들은 동기화 action입니다. action이 되면 바로 state에 반영되어서 적용이 되었습니다. 하지만 비동기인 상황에서는 대기시간이 걸립니다. 예로들어 API를 이용하여 데이터를 fetch하는 경우 입니다. 통신 상태에 따라 시간이 불규칙적으로 걸릴수 있기 때문입니다.  이번에는 axios 또는 fetch을 이용하여 코드를 짜보도록 하겠습니다. 일단 fetch을 하여 최종적으로 redux storage에 저장하는 것이 목적입니다. 그러기 위해서는 가장먼저 state를 설계해야 합니다. 내용과 구조는 아래와 같습니다. loading : API를 통해서 데이터를 다운로드 받고 있는 중일때 true, 완료 혹은 error는 false data : fetch(혹은 axios)를 통해 받은 데이터를 저장(여기서는 유저정보) error: fetch도중 에러가 발생시 error메세지 저장 State = {      loading : true,       data : [ ],      error: '' } 이제 action.type을 결정해야 합니다. 여기서 설정할수있는 action은 3가지 입니다. 내용은 아래와 같습니다. FETCH_USERS_REQUEST : users 리스트를 fetch합니다. FETCH_USERS_SUCCESS : fetch가 성공적으로 마무리 됬습니다. FETCH_USERS_FAILURE : fetch도중 error가 발생. 이제 reducer를 설정해야 하는데 위의 action을 이용하여 설정할수 있습니다. action.type FETCH_USERS_REQUEST   - loading : true FETCH_USERS_SUCCESS - loading : false - users : data (해당 API를 통해 다운) FETCH_USERS_FAILURE - loading : false - err : ...