(redux의 특유의 복잡성 때문에 미래엔 쉬운 라이브러리로 대체될 가능성이 높음)
ex) react effector, react recoil 같은 라이브러리가 있어서 이것도 한번 살펴보자. (recoil은 페이스북 개발자들이 만드는중)
설치하면 store, reducer 함수 만들 필요 없이 그냥 useState 비슷한 문법을 써서 쉽게 state를 생성, 수정, 관리할 수 있습니다.
모든 컴포넌트에서!!
다만 이미 리덕스로 개발된 곳도 많고 실제 유저도 가장 많기 때문에 리덕스 일단 배워놓자구~

Detail.js 페이지에서 주문하기 버튼을 눌렀을때 실제로 장바구니에 담기게 해보겠다. 주문하기 클릭시 state에 새로운 값을 추가.
redux에선 역시 reducer를 통해 데이터 수정방법을 만들고 dispatch하면 완료.

• dispatch할 때 데이터를 실어 보내는 법도 알아보자.

오늘의 빠른 결론 !
props.dispatch({ type : 어쩌구, payload : ‘안녕’ }) 이렇게 쓰면 안녕이라는 데이터를 redux store까지 데이터를 실어보낼 수 있고
reducer 안에서 요청을 처리할 땐 액션.payload 라고 쓰면 보냈던 ‘안녕’ 데이터를 사용할 수 있습니다.

(index.js)
let 초기값 = [
  { id : 0, name : "멋진신발", quan : 2},
  { id : 1, name : "섹시신발", quan : 34}
];
reducer(state = 초기값, 액션){
	if(액션.payload === true){
    	copy = [...state];
        copy.push(액션.payload);// Detail.js의 주문하기 클릭시 해당부분 push
        return copy;
    }
	return state;
}

function state를props화(state){
	return {
    	state : state.reducer,
        alert열렸니 : state.reducer2
    }
}

export default connect(state를props화)(Detail)
// 맨위 connect 관련 import

(Detail.js)
주문하기버튼 클릭
<button onClick={()=>{ 
  props.dispatch({type:'항목추가', payload:{id:2, name:"좋은신발", quan:33 }}); //payload(뜻:화물,관습적으로쓰임)를 항목추가시키겠다라는 뜻의 코드.
  // 버튼 클릭시 payload엔 redux store로 전달할 데이터 작성
  history.push('/cart'); //페이지 강제이동
}}> 주문하기 </button>

위에 것들을 정상적으로 작성했는데

Cart 페이지 방문했을 때 추가한 데이터가 안보인다?

지금 데이터 수정,저장 하고 있는건 사이트 새로 입장시 초기화됨.
해결 -> history.push() 라우터 함수를 이용해서 페이지 강제 이동시키면 됨.
state 리셋 안됨! 당근 useHistory import해야함

아래와 같이 불편한 세팅을 해주는것은 옛날문법이다.

function state를props화(state) {
  console.log(state);
   return {
     state: state.reducer, // state를 state라는 props로 바꿔달라.
     isAlert: state.reducer2,
   };
 }
 export default connect(state를props화)(Cart);

이것을 보완하고자 나온것이 useSelector()

useSelector()

import {useSelectgor} from 'react-redux';
let state = useSelector((state) => state.reducer); 
// return 의 약자
console.log(state); //  [{…}, {…}]
0: {id: 0, name: '멋진신발1', quan: 2}
1: {id: 1, name: '멋진신발2', quan: 1}

useDispatch()

import {useDispatch} from 'react-redux';
let dispatch = useDispatch();

props.dispatch()를 이제 props.를 안쓰고 쓸수 있다.