본문 바로가기
반응형

Redux3

React Redux 4 (dispatch 데이터 보내기) 장바구니 추가기능, 이런 기능을 구현하려면 결국 reducer수정방법에 다라 dispatch를 이용해 데이터를 다시 전송해야한다. dispatch로 전송하는법과 reducer안에서 받은 데이터를 payload로 사용하는법을 알아보자 redux에서 데이터를 수정할때의 3단계 1.데이터 수정하는법 만들기 2.dispatch하기 3.dispatch에서 데이터를 함께 실어 보내기 let 초기값= [{id : 0, name : '멋진신발', quan : 2}, {id : 1, name : '멋진신발2', quan : 3}, {id : 2, name : '멋진신발3', quan : 5}, ] function reducer(state = 초기값, 액션){ //es6 신문법, 기본파라미터 문법 데이터 초기값을 그냥 넣.. 2022. 1. 17.
React Redux 2(reducer,dispatch,state수정) reducer / dispatch 리덕스 데이터 수정하는법 리덕스에서 state데이터를 수정하는법 reducer 함수를 만들어 수정하는 '방법'을 정의해놓는다 그리고 dispatch()함수를 사용해 reducer에 수정을 요청한다. 정해져있는 방식이니 그대로 사용하자 function Cart(props){ return ( # 상품명 수량 변경 { props.state.map((a,i)=>{ return ( {a.id} {a.name} {a.quan} { ??? }}> + ) }) } ) } props.state로 리덕스에있는 state를 가져와 map반복문을 사용 a는 당연히 안의 값이고 i는 인덱스 값이다. 오류가 나지않게 key 값을 넣어주고 state안의 id,name,quan을 출력하게 만들었다... 2022. 1. 17.
React Redux 1 Redux - props전송없이 모든 컴포넌트에서 state를 사용하기 위해 사용 이와같은 구성에서 App.js와 index.js를 기본으로 여러 컴포넌트들을 만들어준다. 우선 중요한건 redux설치와 세팅 redux,react-redux두개를 설치해준다. yarn add redux react-redux npm install redux react-redux cart.js라는 곳에 새로 만들고 컴포넌트로 app.js에 등록을해준다. import Cart from './Cart.js' ..... 그리고 index.js에 redux설정을 해준다. import { Provider } from 'react-redux'; import {combineReducers, createStore} from 'redux'; .. 2022. 1. 17.
반응형

티스토리툴바