본문 바로가기

리액트

Redux

Redux는 state를 관리해주는 것.

John Ahn-youtube

 

Redux 데이터 flow(strict unidirectional data flow)-한방향

Action-상태에 어떤 변화가 일어날 때 발생되는데 하나의 객체로 표현되고, type을 필수적으로 가져야한다.

-액션타입  export const FETCH_TRENDING = 'FETCH_TRENDING'; 

-action creator-액션을 만드는 함수로 단순히 파라미터를 받아와서 액션 객체 형태로 만들어준다.  컴포넌트에서 더욱 쉽게 액션을 발생시키기 위함으로 함수 앞에 export를 붙여서 다른 파일에서 사용한다.

 

 

smooth97.log

 

   {type: 'LIKE_ARTICLE', articledId:42} //아티클 42번을 좋아요를 설명

   {type: 'FETCH_USER_SUCCESS', response: {id: 3, name: 'Mary'}}//유저를 가져오는걸 설명했다. 아이디가 3 이름 마리

   {type: "ADD_TODO', text: 'READ THE REDUX DOXS.'}//텍스트를 TODO 리스트에 ADD했다.

 

Reducer- 변화를 일으키는 함수.

 원래 3이였지만 액션을 통하여 4로 변했다.

 이전 state과 action object를 받은 후에 변해진 state를  return 한다.

  (previousState, action) => nextState

-reducer는 pure function 이기에 reducer 내부에서 하지 말아야 할 것들!

 -mutate its arguments;

 -perform side effects like api calls and routing transitions;

 -cal non-pure functions , e.g Date.now() or Math.random().

smooth97.log

Store- application의 전체 state를 감싸주고 있어

 많은 메소드들이 있는데. 메소드를 이용하여 state를 관리

리덕스에서는 한 애플리케이션당 하나의 스토어를 만들게 되고, 스토어 안에는 현재 앱의 상태와, 리듀서가 들어가있다.

<Provider /> is the higer-order component provided by react redux that lets you bin redeux to react 

 

 

'리액트' 카테고리의 다른 글

react vs react Hooks  (0) 2020.03.19
redux thunk,promise  (0) 2020.03.19
Props와 state의 차이  (0) 2020.03.19
리액트와 노드 한번에 실행시키기(concurrently)  (0) 2020.03.11
Proxy  (0) 2020.03.11