본문 바로가기
반응형

Reducer3

React Redux 3(state,ruducer 여러개만들기) Redux를 쓰면서 중요한건 state나 reducer가 여러개 있을 수 있다는거 당연히 프로젝트가 커지면 커질수록 여러개를 만들 수 있겠지 그래서 아마 이사용방식이 점점 최종형태가 될듯싶다. combineReducers()라는 함수에 만든 createStore()를 넣고, reducer도 여러고 결합해서 사용해주는 형태를 알아보자 위와같은 팝업을 닫는거는 그냥 useState를 써도되지만 Redux를 사용해서 해보자 index.js let 초기값= [{id : 0, name : '멋진신발', quan : 2}, {id : 1, name : '멋진신발2', quan : 3}, {id : 2, name : '멋진신발3', quan : 5}, ] function reducer(state = 초기값, 액션){.. 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.
반응형

티스토리툴바