리덕스 (2) 썸네일형 리스트형 How to Use Redux with React Hooks 각 클래스 컴포넌트에 connect( ) 함수를 사용하여 저장소를 연결하고 전역 상태 및 디스패치 메서드를 wrapping 하는 형태가 함수형 컴포넌트에서 사용 할 때 가독성이나 api 호출하는 부분이 불편했습니다. Hooks for React-Redux: Redux hook API는 connect()를 대신해서 useSelector, useDispatch, useStore과 같은 훅스를 사용할 수 있습니다. useSelector(): useSelector hook is a replacement of the mapStateToProps. It runs whenever function component renders. Its purpose is to extract data from the Redux sto.. Async Actions with Redux Thunk 리덕스는 아래와 같은 흐름으로 동작합니다. 리덕스 미들웨어가 있을때 동작하는 흐름은 아래와 같습니다. 리덕스는 동기적인 흐름을 통해 동작합니다. 액션 객체가 생성되고, 디스패치가 액션 발생을 스토어에게 알리면, 리듀서는 정해진 로직에 의해 액션을 처리한 후 새로운 상태값을 반환하는 과정입니다. 그러나 동기적인 흐름만으로 처리하기 어려운 예로 -외부 데이터 요청하여 그에 따른 응답을 화면에 보여주어야 할 때 -시간을 딜레이시켜 동작하게 할 때 이러한 경우를 위해 비동기 작업을 처리하리하는 데 있어 미들웨어를 주로 사용합니다. 외부 데이터를 요청하여 화면에 보여주기위해 다음과 같이 구조를 만들었습니다. blog -src -- actions --- index.js -- apis --- jsonPlacehold.. 이전 1 다음
