react Redux

Redux(하)🍓

---

기초 문법🚩

index.js

function reducer(state = datastate, action) {

    if (action.type === "add") {

        let copy = [...state];

        copy.push(action.payload);

        return copy;

    }
}

App.js

props.dispatch( { type : "add", payload : {a,b,c,d} } );

‘Redux의 정보전달’

dispatch의 type옆에 작명하고 보내고 싶은 데이터를 쓴다.

action.작명 ➡️ 메서드를 사용하듯이 보내준 데이터를 사용할 수 있다.

즉, ‘{ type : “add”, payload : {a,b,c,d} }‘이 부분이 reducer➡️action의 프로퍼티라는 것이다.

---

App.js

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

export default connect(state)(App);
----------------------------------------------

import { useSelector, useDispatch } from 'react-redux';

function App() {

    let 작명 = useSelector( (state)=>(state.reducer) )
    let 작명 = useSelector( (state)=>(state.reducer2) )
    let 작명 = useDispactch();

    return

}

export default App;

‘Redux 불러오기 셋팅 신문법’

신문법을 쓰면 더이상 props를 앞에 붙이지 않아도 된다.