Reactive Router+Redux Form講座

Reactive Router+Redux Form講座

前のプロジェクトのレビュー

開始前の状態(現在)

開発環境の設定

gitボイラプロジェクトのインポート

postmanのインストール

バックエンド・サーバに代わるアプリケーション

URLリクエストに基づいてコンポーネントのreact-router-domを選択するのに役立ちます

axios、redux-promiseをインストールして、情報の保存とサーバとの通信を支援

アップグレードされたコンソール?

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"]

Router Switchを選択

 <BrowserRouter basename="hi">
      <div>
       	<Switch>
          <Route path="/posts/new" component={PostsNew} />
          <Route path="/" component={PostsIndex} />
        </Switch>
      </div>
    </BrowserRouter>

<Switch>
  	<Route path="/" component={PostsIndex} />
  	<Route path="/posts/new" component={PostsNew} />
</Switch>

リンクを使用してSPAを保持

<Link className="btn btn-primary" to="/posts/new">Add a Post</Link>

redux-fomrを使用して値伝達エラーを解決

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);

授業の途中で道に迷った!😫

サスペンス

history.push("/")

> {}