라우팅, 리덕스 붙이기

yarn add react-router-dom

yarn add redux react-redux

 

 

- 라우팅 붙이기

 

설치 후 index.js가서

import {BrowserRouter} from "react-router-dom";

[App.js]

import {Route, Switch} from "react-router-dom";
import {withRouter} from "react-router";

 조건부 렌더링 필요없으니 지워주고

경로를 설정해준다.

그리고 export

export default withRouter(App);

 

- 리덕스 붙이기

 

리덕스 모듈 먼저 만들어준다.

모듈이 있어야 스토어를 만들고 스토어가 있어야 컴포넌트랑 연결가능!

액션 만들기 - 이니셜 스테이트 - 액션 크리에이터 - 리듀서

 

스토어 만들어주기

 

index.js 가서 프로바이더 사용해서 붙여준다.

프로바이더 사용전에 프로바이더를 통해 주입해줄 스토어 import

provider로 감싸준다.

이제 App.js가서 connect해준다.

import { connect } from "react-redux";

함수 두개 가져온다.

export 해준다.

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(App));

연결 끝!

 

이제 스토어에있는 값을 각각 가지고오게끔 연결해준다.

(=컴포넌트에서 리덕스 액션 사용하기)

 

Start.js의 이름이 뻥 뚫려있으니 이름 데이터를 가져와준다.

import {useDispatch, useSelector} from "react-redux";

quiz.js

퀴즈 모듈 리스트에 이름이있으니, 변수 추가

Start.js

퀴즈안에 있는 name가져 올거니까 state.quiz.name

 

이제 dispatch를 사용해본다.

이 화면에서 이름을 적고 시작하기를 누르면 그 이름이 리덕스에 들어가있어야한다.

Start.js

이름을 넘겨줘야하니 input에 ref를 먼저 걸어준다.

input에 ref={input_text}를 넣어주고

아래 버튼에도 온클릭 디스패치를 넣어준다.(버튼을 클릭해야 액션하게 해야하니까)

아 그전에 

import {addUserName} from "./redux/modules/rank";

이름 저장하는 디스패치 마저 완성!

그리고 퀴즈도 풀 수있도록 history.push

 

Quiz.js

이제 데이터를 props에서 가져오는게아니고 리덕스에서 가져오기때문에 map에러가 생겼다.

리덕스에서 가져오기위해선 일단 연결부터

변수 만들어주고

{props.list.map((l, idx) => {

에서 

{quiz.map 으로 바꿔준다.