리액트 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 [email protected]

정보 저장 및 서버와의 통신 도와줄 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 태그는 어떻게 움직이게 하는걸까?

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 -> 해결

Author And Source
이 문제에 관하여(리액트 Router + Redux Form 강의), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@gavri/section-9-Router-Redux-Form

저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

리액트 Router + Redux Form 강의