리액트 Router + Redux Form 강의
이전 프로젝트에 대한 회상
- 한페이지내에서 구성하여 최상위 컴포넌트 하나로 모든걸 운영하였다.
- 리덕스에 데이터를 받아 사용하기만 하였다. 리덕스 내에 데이터를 삽입하는 방법을 모른다.
시작전 나의 상태(현재)
- 미들웨어에 대한 지식이 부족하다
- 리덕스의 사용법을 완벽하게 익히지 못하였다.
개발환경 Setting
git 보일러프로젝트 받아오기
git clone https://github.com/StephenGrider/ReduxSimpleStarter.git
cd ReduxSimpleStarter
npm i
npm start
postman 설치
postman 서버 요청을 편하게 하기 위한 프로그램
사용시 요청 url을 입력하고 send를 하면 어떠한 데이터가 넘어오는지 알수있고 보내는 데이터형태 또한 지정가능하다.
백엔드 서버를 대신 해줄 앱
http://reduxblog.herokuapp.com
URL 요청에 따른 Component 선택을 도와줄 react-router-dom
react-router 과의 차이점은 Dom에 접근할수 있도록 도와준다.
npm install --save react-router-dom@4.0.0
정보 저장 및 서버와의 통신 도와줄 axios , redux-promise 설치
npm i --save axios redux-promise
업그레이드된 Console?
https://stephengrider.github.io/JSPlaygrounds/
const posts = [
{id:4,title:"Hi"},
{id:25,title:"Bye"},
{id:36,title:"Gavri"},
]
posts
_.mapKeys(posts,'id')
const state = _.mapKeys(posts,'id')
state
state["4"]해당 사이트에서 이 코드를 작성시
이러한 결과를 얻을수 있음
여기서 중요한것은 lodash의 mapKeys 함수인거 같습니다. 해당 함수는 첫번째 인자로 받은 배열에서 두번째 인자로 전달받은 것과 같은 이름의 데이터를 새로운 Key 값 기존의 Object를 Value로 지정하여 새로운 객체를 만듭니다.
Ex)posts= {"id": 4, "title": "Hi"} .mapKeys(posts,"id") -> {"4"(New Key):{"id": 4, "title": "Hi"}(New Value)}
Router Switch 로 선택하기
<BrowserRouter basename="hi">
<div>
<Switch>
<Route path="/posts/new" component={PostsNew} />
<Route path="/" component={PostsIndex} />
</Switch>
</div>
</BrowserRouter>Switch 컴포넌트를 사용하면 어떤일이 벌어질까? Switch 문 처럼 해당하는 케이스로 빠지게된다.
/posts/new 로 요청을하면 기존에는 컴포넌트 PostsNew,PostsIndex 둘다 불러와지는 반면
Switch 를 사용하게 된다면 path 조건에 맞는 곳으로 빠진다
여기서 문제 현재 라우터의 위치를 위아래를 변경한다면 /posts/new 로 요청해도 path="/" 에 먼저 걸리므로 PostsIndex만 불러와지는 좋지못한 결과를 얻게된다.
<Switch>
<Route path="/" component={PostsIndex} />
<Route path="/posts/new" component={PostsNew} />
</Switch>Link(React-router-dom)로 SPA유지하기
<Link className="btn btn-primary" to="/posts/new">Add a Post</Link>to="경로" 적어주면 SPA를 유지한상태로 페이지 이동이 된다.
redux-fomr으로 값 전달 Error 해결
reducer index.js
import { reducer as formReducer } from "redux-form";// 추가
const rootReducer = combineReducers({
posts: PostsReducer,
form: formReducer,
});//해당 formReducer 리듀서 추가
./posts_new.js
import { Field, reduxForm } from "redux-form"; //추가
<form onSubmit={handleSubmit(this.onSubmit.bind(this))}>
<Field
label="Title For Post"
name="title"
component={this.renderField}
></Field>
</form>
renderField(field) {
return (
<div className="form-group">
<label>{field.label}</label>
<input //onChange={field.input.onChange}
className="form-control"
type="text"
{...field.input}
/>
{field.meta.error}
</div>
);
}
function validate(values) {
const errors = {};
if (!values.title) {
errors.title = "Enter a title!";
}
if (!values.categories) {
errors.categories = "Enter a categories!";
}
if (!values.content) {
errors.content = "Enter a content!";
}
return errors;
}
export default reduxForm({
validate,
form: "PostsNewForm",
})(PostsNew);
해당 소스를 참고하면 Redux-form reducer를 추가해주고
Action.type
강의도중 길을 잃어버렸다! 😫
따라치긴 했엇는데 도중이 길을 잃어버렸다..
다시 따라치면서 실제 프로젝트 진행중 다시 보는일이 없도록 반복 숙달해야겠다.
궁금증
history.push("/")
onSubmit(values) {
this.props.createPost(values, () => {
this.props.history.push("/");
});
}
할시 push의 인자값대로 도메인이 움직인다
Link
export function Link<S = H.LocationState>(
...params: Parameters<Link>
): ReturnType<Link>;
export interface Link<S = H.LocationState>
extends React.ForwardRefExoticComponent<
React.PropsWithoutRef<LinkProps> & React.RefAttributes
> {} H.LocationState
export type LocationState = History.LocationState;
이해하지 못하였음.. 까볼려다가 이거 까다간 끝없이 시간 보낼것같음 나중에 공식문서 읽어보도록
-- History Mdn 첨부
해결 ) 08-23 // https://developer.mozilla.org/ko/docs/Web/API/History
도중에 Error 와 대처
bundle.js:22665 Warning: Please use require("history").createBrowserHistory instead of require("history/createBrowserHistory"). Support for the latter will be removed in the next major release.
구글번역기 :
require("history/createBrowserHistory") 대신 require("history").createBrowserHistory를 사용하세요. 후자에 대한 지원은 다음 주요 릴리스에서 제거됩니다.
에러를 보고 구글번역기 -> 다음 주요 릴리스에서 제거됩니다. -> Update하면 되지 않을까? npm i react-router-dom -> 해결
