React (14) Redux

■ Redux란?

- state같은 경우 각 컴포넌트의 상태를 관리했다면 Redux는 전체적인 애플리케이션의 상태를 관리하는 패키지로 모든 컴포넌트에서 공유하는 앱 상태(state)를 다룰 수 있다.

 

■ Redux의 구성요소 

● 저장소(store)

- 앱의 상태를 저장하는 저장소

- state는 애플리케이션당 한개만 존재하며 configureStore()에 의해 생성되면서 reducer와 결합한다.

- useSelector(state)훅을 통해 저장소의 상태(state)를 가져올 수 있다.

 

● 액션(action)

- 개발자가 만드는 객체로 useDispatch훅을 통해 저장소로 action을 전달한다.

 

● 디듀서(reducer)

- 현재 앱상태(oldState)와 action객체 2가지를 매개변수로 입력받는 함수로 상태값 + 액션을 결합하여 새로운 상태(useState)를 저장소로 전달해준다.

 

● 미들웨어(middleware)

- action을 dispatch함수로 전달하고 reducer가 실행되기 전과 실행된 후 처리되는 기능

 

■ UseSelector()

- 리덕스 저장소에 저장된 특정 상태를 얻어올 때 사용한다.

 

■ UseDispatch()

- 액션을 저장소로 운반하는 역할을 한다.

- Reducer의 두번째 매개변수로 action객체를 전달시켜준다.

 

■ createSlice

- 리덕스에서 제공하는 함수로 리듀서와 action을 함께 생성 해줄 수 있다.

- 반복적인 액션 생성작업을 줄여서 생산성을 향상시키기 위해 만들어진 함수 

[표현법]
const 변수명 = createSlice({
	name : '리듀서의 이름',
	initialState : 초기화할 값,
	reducer : {
		액션1 : () => {
		// 상태변경로직
		},
		액션2 : () => {
		// 상태변경로직
		}
	}
});