connect API

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

connect는 react-redux의 내장 API 이다.

이 함수는 React Component를 Redux Store에 '연결' 해준다.

이 함수의 리턴값은 특정 컴포넌트 클래스의 props를 store의 데이터에 연결시켜주는 또 다른 함수를 리턴한다.

리턴된 함수에 컴포넌트를 인수로 넣어 실행하면, 기존 컴포넌트를 수정하는게 아니라 새로운 컴포넌트를 return 한다.

인수 :

mapStateToProps(state, [ownProps]): (Function) store의 state를 컴포넌트의 props에 매핑 시켜준다.

ownProps 인수가 명시될 경우, 이를 통해 함수 내부에서 컴포넌트의 props 값에 접근 할 수 있다.

mapDispatchToProps(dispatch, [ownProps]): (Function or Object) : 컴포넌트의 특정 함수형 props를 실행 했을 때, 개발자가 지정한 action을 dispatch 하도록 설정한다. ownProps의 용도는 위 인수와 동일하다.

출처 : http://velopert.com

const mapStateToProps = state => ({
    todos: state.todos,
    editingId: state.editingId
});

const mapDispatchToProps = dispatch => ({
    getTodos: () => dispatch(TodoActions.getTodos()),
    addTodo: text => dispatch(TodoActions.addTodo(text)),
    deleteTodo: id => dispatch(TodoActions.deleteTodo(id)),
    editTodo: id => dispatch(TodoActions.editTodo(id)),
    saveTodo: (id, newText) => dispatch(TodoActions.saveTodo(id, newText)),
    cancelEdit: () => dispatch(TodoActions.cancelEdit()),
    toggleTodo: id => dispatch(TodoActions.toggleTodo(id)),
    toggleAll: () => dispatch(TodoActions.toggleAll()),
    clearCompleted: () => dispatch(TodoActions.clearCompleted())
});

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