redux2(redux 설정방법과 활용)

**redux의 역할 : props전달이 용이, 데이터 수정방법정의

1.react-redux의 provider, redux의 createStore 불러와 주고 

reducer함수로 초기값과 액션값 조건을 설정 

//index.js
[...]
import { Provider } from "react-redux";
import { createStore } from "redux";

let 초기값 = [
  { id: 0, name: "멋진신발", quan: 2 },
  { id: 1, name: "헤진신발", quan: 5 },
];

function reducer(state = 초기값, 액션) {
  if (액션.type === "수량증가") {
    let copy = [...state];
    copy[0].quan++;
    return copy;
  } else if (액션.type === "수량감소") {
    let copy = [...state];
    copy[0].quan--;
    return copy;
  } else {
  //위 조건문에 해당하지 않을경우 초기값
    return state;
  }
}
let store = createStore(reducer);
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
[...]

하위 컴퍼넌트 js 파일에서 connect 설치(react-redux)

props를 인자로 받아오고 dispatch 함수로 함수 type설정

//cart.js
[...]
import { connect } from "react-redux";
function Cart(props) {
  return (
    <div>
[...]
        <tbody>
        {*props state화*}
          {props.state.map((a, i) => {
            return (
              <tr key={i}>
                <td>{a.id}</td>
                <td>{a.name}</td>
                <td>{a.quan}</td>
                <td>
                  <button
                    onClick={() => {
                      props.dispatch({ type: "수량증가" });
                    }}
                  >
                    +
                  </button>
                  <button
                    onClick={() => {
                      props.dispatch({ type: "수량감소" });
                    }}
                  >
                    -
                  </button>
                </td>
              </tr>
            );
          })}
        </tbody>
      </Table>
    </div>
  );
}

//index.js에서 정의한 state를 props화 시킴
function state를props화(state) {
  return {
    state: state, 
  };
}
export default connect(state를props화)(Cart);

// export default Cart;