Project Fake Search#2ディレクトリページの実装と設定

開始します。

個人プロジェクトなので、すべての木業ページは自分で作成する必要がありますが、必要なページ数は少なく、かつ以前のプロジェクトを通してCSSに対する理解がある程度向上しているので、想像以上に早く行うことができます.反応型を考慮してwidthを設定し,ラベルメニュー,モードなどの状態が必要な部分を実現するとともに,ディレクトリページを作成した.

木業ページ

メイン

ページの設定

検索ページ

redix設定

ログオンレプリカ

//loginReducer
const loginReducer = (
  state = {
    isLogin: false,
    oauth: '',
    id: 'default',
    siteName: 'FAKESEARCH',
    themeColor: '#2260FF',
  },
  action
) => {
  switch (action.type) {
    case LOGIN:
      return {
        ...state,
        ...action.payload,
      };
    case LOGOUT:
      return {
        ...state,
        isLogin: false,
        oauth: '',
        id: 'default',
        siteName: 'FAKESEARCH',
        themeColor: '#2260FF',
      };
    default:
      return state;
  }
};

ログインリプレイの設定の重要な理由の1つはthemeColor(トピックカラー)です.ユーザーが設定した色がホームページ、設定、検索ページの色を変更するため、stateではなくリプレイを個別に作成して管理することにしました.

//Main.js
			...
import { useSelector } from 'react-redux';
			...
export default function Main() {
			...
  const { siteName, themeColor } = useSelector(
    (state) => state.loginReducer
  );
			...
  return (
			...
          <div
            className='logo'
            style={{ color: themeColor }}
            onClick={() => {}}
          >
            {siteName}
          </div>
			...
  );
}

この形式でトピックカラーをインポートし、色を設定する形式でコードを記述します.

セクション固有の再起動プログラム設定

//profileReducer
const profileReducer = (
  state = {
    type: 'profile',
    order: 1,
    view: 0,
    job: '',
    profileImg:'',
    name: '',
    info: [{title:'',content:''}],
    subinfo: [],
  },
  action
) => {
  switch (action.type) {
    case CHANGEPROFILE:
      return {
        ...state,
        ...action.payload
      };
    case RESETPROFILE:
      return {
        ...state,
        type: 'profile',
        order: 1,
        view: 0,
        job: '',
        profileImg:'',
        name: '',
        info: [{title:'',content:''}],
        subinfo: [],
      };

    default:
      return state;
  }
};

//newsReducer
const newsReducer = (
  state = {
    type: 'news',
    view: 0,
    order: 2,
    content: [{title:'', content: '', datetime: '', reporter:'', img:''}],
  },
  action
) => {
  switch (action.type) {
    case CHANGENEWS:
      return {
        ...state,
        ...action.payload
      };
    case RESETNEWS:
      return {
        ...state,
        type: 'news',
        view: 0,
        order: 2,
        content: [{title:'', content: '', datetime: '', reporter:'', img:''}],
      };

    default:
      return state;
  }
};

//imageReducer
const imageReducer = (
  state = {
    type: 'image',
    view: 0,
    order: 3,
    content: {img1:'',img2:'',img3:'',img4:''}
  },
  action
) => {
  switch (action.type) {
    case CHANGEIMAGE:
      return {
        ...state,
        ...action.payload
      };
    case RESETIMAGE:
      return {
        ...state,
        type: 'image',
        view: 0,
        order: 3,
        content: {img1:'',img2:'',img3:'',img4:''}
      };

    default:
      return state;
  }
};

//musicReducer
const musicReducer = (
  state = {
    type: 'music',
    view: 0,
    album: '',
    info: '',
    date: '',
    order: 4,
    title: '',
    artist: ''
  },
  action
) => {
  switch (action.type) {
    case CHANGEMUSIC:
      return {
        ...state,
        ...action.payload
      };
    case RESETMUSIC:
      return {
        ...state,
        type: 'music',
        view: 0,
        album: '',
        info: '',
        date: '',
        order: '4',
        title: '',
        artist: ''
      };

    default:
      return state;
  }
};

検索ページ設定で使用する各部分の情報をそれぞれReducerに設定します.検索ページでは、構成部品を部分的に分離し、オブジェクト形式で格納されている値が多いと判断したため、冗長管理を容易に行うことができ、actionはloginReducerと同様に値変更とリセットの2種類に設定されています.

の最後の部分

現在はプロジェクト終了後に整理しながらブログを作成しており、実際の開発手順とは差があります.最初はホームページと設定ページの業務と機能の実現を完了し、その後検索ページを実現した.まず、検索ページの設定が完了してから、サーバからデータを受信して表示する検索ページを容易に実現できると思います.