[開発ログ]2番目の機能拡張を再パッケージ

13427 ワード

タイプスクリプト typescript JavaScript はんのう React テキストリンク

今日やったこと

メールアプリで友達追加を実現

言うことは実行する

前回リキッドファンデーションした后に书いた后记を覚えていますか...
見に行く
その際、今後の課題として残された事項がいくつかあり、今日やっと課題としての第一歩として、友達を追加する機能を実現しました.

Fluxとグローバルステータス管理が最高

ステータスはグローバルに管理されるため、各コンポーネントにはステータスの悩みを減らす利点があります.さらにFluxモードを使用してステータス変更を管理することで、コードの簡潔性が大幅に向上します.
まず、既存のUserContextはクエリー機能のみを必要とするため、独立したReduser管理状態では変更されません.しかし、現在は状態が変化しているので、UserContextを再構築することで管理してみましょう.

// userContext.tsx

const userReducer = (state: friend[], action: userReducerAction): friend[] => {
  switch (action.type) {
    case 'user/addFriend':
      return [...state, action.data];
  }
};

まず友達だけが機能を付加しますが、コードは本当に明確です.最後に作成したcustom hookで使用しましょう.

// useUserContext.ts

const addNewFriend = (friend: friend) => {
    friendsDispatch({ type: 'user/addFriend', data: friend });
  };

こんなに簡単に新しい友达を加えることができます.

UIは買いましょう

新しい機能の追加は、新しいページを作成することを意味します.またデザイン、レイアウト、cssを書くなんて、面倒くさい.私は今論理を実現したいのですが、発表したいのではありません.
そこで、これまで注目していたUIライブラリの1つNext UIを今回の機会に適用してみました.Niko先生からのメールで偶然見つけたのは、Alphaバージョンですが、表示されているUIがかなりきれいでした.名前からも次を推測できるjsで有名なVercelで作られたライブラリ.

思ったほど簡単ではありません。

ボタンと入力方式を素早く使いたいだけですが、Next UIが提供するGridシステムは最初は慣れにくいです.<Container/>に付着したgap属性付与容器paddingは、<Grid.Container/>に付着したgapは、children間の間隔を設定する値である.また、困惑する<Row/>、<Col/>のようなレイアウトシステムもあります...慣れると気持ちがいいですが、まだ難しいです.

カッコよくformを使う

反応器ではフォームの処理方法は無数にある.新しい友達を追加すると、inputごとにonChangeeventをそれぞれ記入するのではなく、非常にモダンな方法で複数のinputを処理する名前とステータス情報が表示されます.

<Grid xs={10}>
  <Input
    labelPlaceholder="Nickname"
    name="name"
    value={input.name}
    size="xlarge"
    color={helper.color}
    status={helper.color}
    helperColor={helper.color}
    helperText={helper.helperText}
    {...inputAttributes}
    />
    </Grid>

<Grid xs={10}>
  <Input
    labelPlaceholder="Status"
    status="default"
    name="statusMessage"
    value={input.statusMessage}
    {...inputAttributes}
    size="xlarge"
   />
</Grid>

ご覧のように、onChangeでどのように処理するかについては、2つのinputがあります.

const handleInputChange = (e: any) => {
    setInput({ ...input, [e.target.name]: e.target.value });
  };

これにより、input名に一致する属性に対応する値が含まれていることを確認できます.これを見始めたばかりで斬新だ

友達を追加

最終的に友達はどうやって追加したのでしょうか?

// AddFriend.tsx

const handleAddButtonClick = (e: any) => {
    addNewFriend({ ...input, id: Date.now() });
    alert("친구가 추가되었습니다.");
    history.push("/");
  };