Redux

 

지난번에 제작하고 있던 쇼핑몰 페이지를 예를 들어

 

app.js 에서 props로 authenticate를 계속 사용해왔다

자식 컴포넌트끼리의 props가 오고가지 않기 때문에

 

장바구니 컴포넌트를 만든다고 하면,

자식 컴포넌트끼리 공유가 안되기 때문에 

App.js 에 카트라는 스테이트를 생성해놓고 각각의 컴포넌트에 props로 던져주는 형식이 되어야 한다

 

 

 

 

 

리덕스는 오픈 소스 자바스크립트 라이브러리의 일종으로

state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용한다

 

 

리덕스는 일종의 저장소 라고 생각하면 된다 

store라는 저장고를 만들어서 state를 저장해놓고 각각의 컴포넌트들이 필요에 의해 요청할 때 마다 

컴포넌트가 부모이나 자식이나 상관없이 값을 store에서 가져올 수 있다

 

컴포넌트가 스토어로 다이렉트 요청은 할 수 없다

스토어에서 값을 가져오기 전에 절차가 필요하다

 

로그인을 한다고 하면 로그인 컴포넌트에 로그인 액션을 던져준다

그걸 리듀서가 캐치해서 행동지시의 처리를 어떻게 할지 케이스별로 가지고 있는다 

리듀서가 판단을 하고 절차에 따라 작업을 이어간다

리듀서가 지정된 행동지시에 따라서 스토어에 있는 값을 바꿔줄 수 있다 

 

이렇게 되면 스토어에 있는 값이 변하게 된다 (스토어 - 단순한 객체 타입)

리듀서가 바꿔준 값에 의해 스토어 값이 바뀐다

스토어에 있는 값이 바뀌는 순간 사용할 컴포넌트에서 useDispatch가 일어난다

 

리액트 훅

• useDispatch 
• usdSelector 

 

---

https://ko.redux.js.org/introduction/getting-started/

 

Redux 시작하기 | Redux

리덕스 설치하기

 

 

 

 

 

리액트 리덕스도 함께 설치해 줘야 한다

https://react-redux.js.org/

React Redux | React Redux

 

 

 

---

 

리덕스의 스토어를 만들게 한다

 

 

index.js

  <Provider store={store}>
    <App />
  </Provider>

프로바이더 걸어주기

 

 

index.js 상단에 임포트를 걸어준다

import { Provider } from 'react-redux';

 

 

src 내부에 새로운 폴더를 생성한다

store.js 상단에 임포트를 걸어주고

 

 

 

 

let store = createStore(reducer);

 

지금까지 오면

이런 상태가 되어 있을 것이다

그리고 리듀서도 생성을 해줘야 한다

 

 

리듀서 폴더와 파일을 생성하고 그 안에서 함수를 만들어준다

 

 

이제 차례대로 export 해주고 임포트까지 걸어주면 된다

 

reducer.js

let initialState = {
    count : 0,
}
function reducer(state=initialState, action){

}

export default reducer;

 

store.js

import { createStore } from 'redux'
import reducer from './reducer/reducer'

let store = createStore(reducer);

export default store;

 

index.js 상단에 임포트 걸기

import store from './redux/store';