리액트 // redux 리덕스

 

자바는 타 클래스의 함수를 사용하기 위해서는 객체(레퍼런스)를 넘겨야 한다

자바스크립트(리액트)에서는 함수를 넘길 수 있다 (1급객체)

그런데 객체를 여러 단계로 넘기면 복잡해진다

객체지향에서 제일 어려운 것이 오브젝트를 넘기는 것이다

그러한 점을 해결하기위해 스프링에서는 IOC를 사용한다

스프링은 IOC공간에서 클래스타입으로 객체를 찾아낸다 -> 객체 안의 함수 모두를 가져올 수 있다

자바스크립트에서는 store에서 String값으로 함수를 찾아낸다(Action명) -> 

 

다른 화면에서 건드릴 것들을 예상해서 액션명을 미리 만들어둔다
아래는 store 공간에 만든 액션명들이다

[이벤트]를 등록하는데 다른화면에서 건드릴 것들 

최상위화면(A)에서 store를 만들고 자식들에게 props로 넘긴다

store(스프링의 IOC역할)
액션명 : A.change - (change()함수의 레퍼런스 + 해당화면의 state를 가진다)
액션명 : A.insert - (insert()함수의 레퍼런스 + 해당화면의 state를 가진다)

(액션명과 state 값을 가진 것을 리듀스 라고 한다)

 

다른 클래스가 store를 구독하면 접근을 할 수 있게 된다 (액션명을 호출하면 해당 함수가 실행된다)

레퍼런스를 실행하면 state값이 바뀐다

 

// A.js 화면 이벤트가 3개 있다
// onChange, onInsert, onDelete

// A의 자식 중에 B -> C -> D
// D가 A의 onChange를 건들이고 싶을 경우 기본은 props로 단계를 타고 함수를 전해줘야한다
// store는 모든 함수 레퍼런스를 저장하고 찾을 때 액션명으로 찾게 한다

// 1번 - 액션 이름 하나 생성
const ACHANGE = "a/CHANGE"; // 액션이름이 충돌 나지 않게 하기 위해서 a/를 붙여준다
const AINSERT = "a/INSERT";
const ADELETE = "a/DELETE";

// 앞에 파일명을 붙이고 뒤에 함수명을 붙여서 중복을 막는다
const DDELETE = "D/DELETE";

// 2번 - 액션을 함수로 호출할 수 있게 해야 함
const aChange = () => ({
  type: ACHANGE,
});

// const aChange = () => ({ // 여러줄이라도 소괄호로 묶어주면 한줄로 인식한다
//     type: ACHANGE
// });

const aInsert = () => ({
  type: AINSERT,
});

const aDelete = () => ({
  type: ADELETE,
});

const initialState = {
  number: 0,
};

// 3번 - 리듀서 만들기( 리듀서가 알고 있어야 하는 값 state, action)
// 프로젝트에 store는 하나로 관리한다
function aREducer(state = initialState, action) {
  switch (action.type) {
    case aChange:
      return {
        number: state.number + 10,
      };
    case aInsert:
      return {
        number: state.number + 1,
      };
    case aDelete:
      return {
        number: state.number - 10,
      };
  }
}

// 함수들을 익스포트
export { aInsert };
export { aChange };
export { aDelete };

// 리듀서를 익스포트
export default aREducer;

 

STORE 예시

리듀서(state, 액션이름){  }

요청하고 싶은 곳(D)에서 state와 aDelete를 store에 날리면 리듀서가 해당 레퍼런스를 이용해서 함수를 실행한다

state를 같이 날리는 이유는 D의 화면을 변경 하고 싶기 때문이다

 

(액션명과 함수 레퍼런스를 연결은 나중에)

 

리듀서에 액션이 많아지면 구분하기 힘들기 때문에 리듀서를 여러개 만들어서 컴바인 해서 합친다