리덕스는 뭐지??

리덕스의 탄생 배경은??

이제 리액트로만 개발하다 보면 이런 문제가 생길 수도 있습니다.

만약 회색에서 연두로 data를 보내야한다고 생각해 보자... 어휴..

이런 문제가 생기기도 하고 또 이제 코드가 복잡해지는 것을 방지하기 위해서...

 

뭐 이러한 이유로 react를 보조할 수 있는 javascript오픈소스 라이브러리가 생겼습니다.

※Redux는 자바스크립트 앱을 위한 예측 가능한 상태 컨테이너입니다.

 

간단하게 말했지만 리덕스의 탄생 배경이 궁금하다면..

 

 

 

※물론 꼭 redux 스만 react를 보조할 수 있는 것은 아니다. modex 등 다양한 것들이 있지만 저는 아직 redux만 공부했습니다... modex 등도 공부하면 올리겠습니다...

리덕스의 구성요소

를 알아보기 전에 리덕스의 구조부터 알아보겠습니다.

 

리덕스 구조(그림1-1)

• reducer
• store
• action
• dispatch
• subscribe

하나씩 알아보겠습니다.

 

리듀서(reducer)

Function reducer(state=initialSate,action)
{
	Switch(action.type)
	{
		Case "test_add":{
			…state,
			??:action.~~,
		}
		Default:
			Retrun state;
	}
}

리듀서 함수는 이런 식으로 구성이 되어있습니다.

 

state 현재 상태를 가져옵니다.

action.type으로 어떤 행동을 할지 결정합니다.

+action.type은 개발자가 미리 만들어 놉니다.

 

안에 있는 로직을 통해 스토어에 상태를 업데이트를 합니다.

 

※리듀서는 순수 함수이여야 한다.

스토어(store)

※리덕스에서는 한 애플리케이션 당 하나의 스토어를 만들게 됩니다.

스토어 안에는, 현재의 앱 상태와, 리듀서가 들어가 있고, 추가적으로 몇 가지 내장 함수들이 있습니다.

 

import { createStore } from ‘redux’;
...

const store = createStore(reducer);

 

액션(action)

상태에 어떠한 변화가 필요하게 될 땐, 우리는 액션이란 것을 발생시킵니다. 이는, 하나의 객체로 표현되는데요, 액션 객체는 다음과 같은 형식으로 이루어져 있습니다.

{
  type: "TOGGLE_VALUE"
}

구독(subscribe)

구독 또한 스토어의 내장 함수 중 하나입니다. subscribe 함수는, 함수 형태의 값을 파라미터로 받아옵니다. subscribe 함수에 특정 함수를 전달해주면, 액션이 디스패치 되었을 때마다 전달해준 함수가 호출됩니다.

디스패치(dispatch)

스토어의 내장 함수입니다. 액션을 발생시키는 것이라고 이해하시면 됩니다. 액션을 파라미터로 전달합니다. dispatch(action)

 

출쳐(참고했습니다):

https://sooah26.tistory.com/45

[react-redux] 리덕스 기초

https://velog.io/@velopert/Redux-1-%EC%86%8C%EA%B0%9C-%EB%B0%8F-%EA%B0%9C%EB%85%90%EC%A0%95%EB%A6%AC-zxjlta8ywt

Redux (1) 소개 및 개념정리

https://kbennycc.blogspot.com/2019/02/0113-react-redux.html

01.13 React Redux(리덕스)

 

책: 모던리액트/리덕스 프로그래밍