Redux란????

 

Redux란?

리덕스는 상태 관리 라이브러리다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있다. 또 컴포넌트끼리 똑같은 상태를 공유해야 할 때도 여러 컴포넌트를 거치지 않고 손쉽게 상태 값을 전달하거나 업데이트 할 수 있다(전역 상태 손쉽게 관리!)

 

ex) 리덕스 없이 state 전달

 

A의 상태가 E까지 가려면 A> B > C > D> E 순으로 복잡하다.

또한 전역 상태 관리가 상당히 복잡해진다.

 

 

그러나 리덕스를 사용하면 store를 통해 global state을 포함한 모든 state를 저장, 유지할 수 있게 되며, 원하는 Component로만 data를 전달할 수 있게 되어 이러한 문제가 해결된다.

 

 

Redux 개념

store 

전역 상태를 저장한다. JavaScript 객체 형태로 저장되어 있으며 리듀서를 통하지 않고 접근할 수 없다.

하나의 어플리케이션에 하나의 저장소만 존재해야된다.(여러개가 가능은 하지만 비추)

리액트에선 주로 index.js에 정의한다.

 

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

const store = createStore(/*your root reducer*/);

ReactDOM.render(
  <Provider store={store}>
  	<App />
  </Provider>,
  document.getElementById('root')
);

 

Action

상태에 어떠한 변화가 필요하면 액션이란 것이 발생한다. 액션은 리듀서에게 보내지는 저장소에 대한 행동이다. 리듀서는 이 행동에 따라 저장소에 접근하여 정해진 동작을 하게 됩니다. 즉, 트리거(trigger) 역할이라고 볼 수 있습니다.

액션 객체는 type 필드를 반드시 갖고 있어야 한다.

const addNum = number=>({
	type:'ADD_NUM',
    number
});

 

dispatch

디스패치는 스토어의 내장 함수 중 하나로 '액션을 발생 시키는 것'이라 이해하면 된다. 이 함수는 dispatch(action)과 같은 형태로 액션 객체를 파라미터로 넣어 호출한다.

함수가 호출되면 스토어는 리듀서 함수를 실행시켜 새로운 상태로 만들어 준다.

 

Reducer

저장소에 유일하게 접근할 수 있는 객체이다. 들어오는 action 객체에 따라 현재 상태와 비교해서 새로운 상태를 반환한다. 리듀서 함수 내에서 반환되는 값이 상태 저장소에 저장된다. 단, 상태가 추가되는 것이 아닌 덮어씌워지게 되므로 전체 상태를 복사하여 상태를 갱신한 후에 반환해야 한다(불변성 유지).

 

const init ={
	number:1
 };
 
 function reducer(state=init,action){
 	switch(action.type){
    	case:INCREMENT:
        	return{
            	number:state.number+1
                };
              default:
              	return state;
       }
  }

 

Subscription

서브스크립션은 저장소에 저장된 전역 상태를 가져온다. 따라서, 어느 컴포넌트에서도 저장소에서 상태값을 얻을 수 있다. 이를 통해 얻은 액션과 전역상태를 통해 컴포넌트는 원하는 동작을 할 수 있게 된다.

import { connect } from 'react-redux';

const mapStateToProps = (state, ownProps) => {
  return {
    posts: state.posts,
  };
};

const mapDispatchToProps = (dispatch, ownProps) => {
  return {
    deletePost: (id) => {
      dispatch(deletePost(id));
    },
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(Post);

위 코드에서, HOC를 통해 전역상태와 액션을 위한 Dispatch를 컴포넌트에 전달한다.
이 컴포넌트에서는 props를 통해 전역상태와 Dispatch를 사용할 수 있다.

 

 

 

참고링크

React에 Redux 적용하기

Redux vs Content api