# bindActionCreators

arthur

bindActionCreators 이름에서 알 수 있듯 Action Creators를 하나로 바인딩하는 기능을 제공한다. 서로 다른 리듀서의 Action Creators를 다음과 같이 하나로 바인딩 할 수 있다. useActions React-Redux에서는 useActions() 훅으로 이 기능을 제공했다. 하지만 이 기능은 React-Redux의 v7.1.0-alpha.4 부터 제거되었다. 그 이유는 다음과 같다. > This hook was in our original alpha release, but removed in v7.1.0-alpha.4, based on Dan Abramov's suggestion. That suggestion was based on "binding action crea

gygy

액션 생성함수를 더 간편하게 작성하기 createAction 액션 생성함수를 보다 간편하게 작성할 수 있도록 도와주는 함수이다. 기존 액션 생성 함수 액션 생성 함수는 FSA 규칙을 따른다. 필수적으로는 순수 자바스크립트 객체이며 type 값이 있어야 한다. 선택적으로 payload, error, meta 값이 있을 수 있다. payload는 액션에서 사용할 파라미터를 전달해준다. 위 예시에서 create나 changeInput은 텍스트 값을 받아와야 하기 때문에 파라미터가 되는 text를 payload값으로 지정한다. createAction 함수를 이용하면 type과 payload임을 명시해주지 않아도 된다. 첫 번째 파라미터는 type, 두 번째 파라미터는 payloadCreator로 받는다. 기존 액션생성함수 `export const changeInput = text => ({ type: CHANGE_INPUT, paylo

gygy

우선 앞에서 공부했던 컴포넌트에서 스토어에 저장하는 과정은 dispatch로 action을 reducer에 전달해주고, reducer에서 action type에 따라 상태값을 어떻게 변경할지 정의한다음, 이것을 store의 상태값에 덮어씌우는 것이었다. 반대로 스토어에서 컴포넌트로 상태값을 가져오는 과정은 dispatch를 통해 mapStateToProps, mapDispatchToProps 로 상태값을 props로 맵핑한다. bindActionCreators를 사용하면 보다 간결하게 코드를 작성할 수 있다. 이 props의 형태로 상태값을 연결된 컴포넌트로 전달받는다. 이 전 과정을 도식으로 보면, ![](https://images.velog.io/images/gygy/post/3ee5ba39-0542-4ebd-8d1b-0c01d8a81b62/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B

gygy

wesbos의 무료로 공개된 자료 https://learnredux.com/ 을 학습하며 정리한 내용입니다. 🦠 connect connect는 HOC이다. 리액트 앱의 하위 컴포넌트에서 redux store에 접근하는 것을 가능하게 해주는 역할을 한다. 이 connect함수를 이용해 컴포넌트에서 redux store에 접근하고 액션을 호출할 수 있다. 이렇게 컴포넌트에 전달할 때 store만 전달하는 것이 아니라 action을 넣을 수 있는 dispatch함수까지 전달한다. 리덕스 스토어 안에 있는 상태를 props로 넣어줄 수도 있고, 액션을 디스패치 하는 함수를 props로 넣어줄 수도 있다. HOC Higher Order Component 리액트 컴포넌트를 개발하는 패턴으로, 컴포넌트의 로직을 재활용할 때 유용하다. 컴포넌트를 특정 함수로 감싸서 특정 값 또는 함수를 props로

ye-r1

Today I Learned 📝 styled-components : 상속과 분리 react-redux : actionCreators를 미리 binding 하기 javascript : 논리연산자 단축평가 javascript : optional chaining = ?. styled-components : 상속과 분리 styled-components 상속하기 react-router-dom에 있는 기능인 Link를 상속시켜 link tag로 만들 수 있다. 또한 기존 컴포넌트에 별도로 덧입히고 싶은 스타일이 있다면 styled()안에 컴포넌트명을 적어 기존 스타일을 상속할 수 있다. styled-components 분리하기 /Layout/Layout.Styled.js layout grid 처럼 자주 쓰는 레이아웃 컴포넌트를 생성하고 컴포넌트들을 모아 한 파일