[React js] Redux

프롭스가 많아지면 쓰기 불편해서 쓰기 싫을 때 쓴다.

 

 

1.띄어쓰기를 해서 2개를 동시에 설치한다.

yarn add redux react-redux

 

2.index.js 에 import하고 다음과 같이 app component를 Provider로 감싸준다

<Provider>
	<App />
</Provider>

(감싸진 애들끼리 props 없이 state 공유 가능)

 

3. createStore로 state를 만든다.

let store = createStore(()=>{});

 

4. Provider에 값을 전달한다.

<Provider store={store}>

그냥 바로 store로 쓸수는 없고 세팅을 해야한다.

 

5. Cart.js에서 다음 함수를 추가하고 export default부분을 다음과 같이 바꾼다.

function state를props화(state) { 
    return {
        state : state
    }
}

export default connect(state를props화)(Cart)
// export default Cart;

(redux store데이터를 가져와서 props로 변환해주는함수이다.)

 

여기까지 했으면 redux의 데이터를 props의 데이터처럼 쓸 수 있다.