• 상태관리가 복잡해지면서 Redux를 보게되었다. 이미 프로젝트에 리덕스 코드들이 존재하지만, 이해하지 못한 부분이 있기때문에 따로 개념을 살펴본다.
• 리덕스에서 Store는 앱을 종료하면 저장되어 있던 모든 상태가 없어진다. 캐시기능 구현을 하는 장치가 필요하다.

액션(Action)

• 상태에 변화가 필요할때 액션으로 변경을 시킨다. 액션객체는 아래와 같은 형태로 이루어져 있다.
• 액션객체는 type필드를 필수적으로 가져야하며 그 외 값들은 개발자 마음대로 넣을 수 있다.

{
	type: 'TOGGLE_VALUE'
}

// another ex
{
  type: 'ADD_TODO',
  data: {
    id: 0,
    text: '리덕스 배우기'  
  }  
}

액션 생성함수

• 액션을 만드는 함수이며 파라미터를 받아와서 객체 형태로 만든다.

function addTodo(data) {
	return {
		type: 'ADD_TODO',
		data
	};
};

const changeInput = (text) => ({
	type: 'Change_input',
	text		
})

리듀서

• 리듀서는 변화를 일으키는 함수다. 2가지 파라미터를 받는다. 현재 상태와 전달 받은 액션을 참조하여 새로운 상태를 만들어서 반환한다.

function reducer(state, action) {
	// state update logic
	return alteredState;
}

스토어

• 애플리케이션당 하나의 스토어를 만든다. 현재의 앱상태와 리듀서가 들어있다.

디스패치

• 스토어의 내장함수로 액션을 발생시킨다. dispatch는 액션을 파라미터로 전달한다. dispatch(action)… dispatch가 호출되면 스토어는 리듀서 함수를 실행시켜 해당 액션에 대한 로직을 실행한다.

구독

• subscribe함수는 함수를 파라미터로 받는다. subsribe함수에 함수를 전달해주면 액션이 디스패치 되었을때마다 전달해준 함수가 호출된다.

• 리액트에서 리덕스를 적용할때는 react-redux를 사용하고 Provider라는 컴포넌트를 사용한다.

connect함수로 컴포넌트에 스토어 연동하기

• 컴포넌트에 리액트 스토어 안에 있는 값이나 액션함수들이 연동된 컴포넌트를 컨테이너 컴포넌트라고 한다.

class sampleComponent extends React.component {
// code...


  // props 로 넣어줄 스토어 상태값
  const mapStateToProps = state => ({
    color: state.counter.color,
  });

  // props 로 넣어줄 액션 생성함수
  const mapDispatchToProps = dispatch => ({
    changeColor: color => dispatch(changeColor(color)),
  });

  // 컴포넌트에 리덕스 스토어를 연동해줄 때에는 connect 함수 사용
  export default connect(
    mapStateToProps,
    mapDispatchToProps
  )(sampleComponent);
}

• 컨테이너 컴포넌트를 만들때 react-redux에 있는 connect함수를 사용
• connect함수의 파라미터 mapStateToProps는 스토어 안에 있는 값을 props로 전달해주고 mapDispatchProps는 액션생성함수들을 props로 전달해준다.
• mapDispatchToProps는 상태변화가 일어나는것이 아닌 액션객체를 생성한다. 액션객체를 스토어에 전달해야 상태변화가 일어난다.