react Redux

Redux(상)🍓

---

npm install redux react-redux

redux를 사용하기 위해 터미널에서 명령어를 통해 설치하자.

기초 문법🚩

index.js

import { Provider } from "react-redux";
import { createStore } from "redux";

let store = createStore(reducer); //state만들기

function reducer() {
  return [
    { id: 0, name: "신발", quan: 7 },
    { id: 1, name: "상의", quan: 18 },
  ];
}

ReactDOM.render(
    <Provider store={store} >
      <App />
    </Provider>
);

App.js

import React from "react";
import { connect } from "react-redux";

function Abcd(props) {
    return (
    	<div>
        	{props.작명} // ['a','b']
        </div>
    )
}

function 작명1(state) {
    return {
        작명: state
    }
}

export default connect(state)(작명1);

‘초기셋팅’

a,b가 담긴 store을 어디에서나 사용할 수 있다.

---

index.js

let datastate = [
  { id: 0, name: "신발", quan: 2 },
  { id: 1, name: "상의", quan: 18 },
];

function reducer(state = datastate, action) {
  if (action.type === "inc") {
    let copy = [...state];
    copy[0].quan++;
    return copy;
  } else if (action.type === "dec") {
    let copy = [...state];
    copy[0].quan--;
    return copy;
  } else return state;
}

let store = createStore(reducer);

App.js

function Cart(props) {
    return(

    	{props.dispatch({ type: "inc" }}

    )

‘Redux의 변수의 값 변경’

변수의 값을 변경하고 싶을땐 초기설정했던 곳에서 변경할 액션을 만들고 작명한다.

그것을 필요한 곳마다 불러오는 식으로 변수의 값을 변경하는데 이 방법은 컴포넌트가 많을때 에러를 잡기에 아주 편리하다.

---

index.js

function reducer(state = datastate, action) {}

function reducer2(state = opneclose, action) {}

let store = createStore(combineReducers({ reducer, reducer2 }));

app.js

function state(state) {
  return {
    a: state.reducer,
    b: state.reducer2,
  };
}

export default connect(state)(Cart);

‘2개이상의 Reducer만들기’

변수를 한개더 만들고 싶다면 combineReducers를 통해 더 만들 수 있다.