Development/React.js

Redux

moretz0921 2022. 3. 24. 21:05

Redux : Flux 패턴의 상태관리 라이브러리 


3가지 규칙
- 하나의 어플리케이션 안에는 하나의 Store만 사용한다.
- 상태는 읽기 전용이다. 
- 변화를 일으키는 함수, Reducer는 순수한 함수여야 한다. 

 

설치 

npm install redux react-redux



설정 
: Provider

import { Provider } from 'react-redux'; 
import store from './store'; 

ReactDOM.render( 
  <Provider store={store}> 
    <App /> 
  </Provider>, 
  document.getElementById('root') 
);


- index.js 에서 Provider 컴포넌트로 App 컴포넌트를 감싼다.
- store.js 파일을 임포트하여 Provider의 props로 전달
- 결과적으로 최상위에 store가 연결되므로 각각의 컴포넌트에 store를 import하는 번거로움이 줄어든다.

 

개념 
1) action 
:  어떤 동작에 대해 선언되어진 객체


- 하나의 객체로 나타낸다.
- type 프로퍼티 필수

2) action creator
: Action 을 생성해 실제로 객체로 만들어주는 함수

3) reducer
: state 에 변화를 일으키는 함수

 

4) store
: state 를 수시로 확인해 View 한테 변경된 사항을 알려줌

'Development > React.js' 카테고리의 다른 글

Next.js - pages와 layout  (0) 2022.03.28
Next.js란?  (0) 2022.03.28
상태관리 라이브러리  (0) 2022.03.24
Styled Components  (0) 2022.03.24
CSS in JS  (0) 2022.03.24