モルデン反応(React)とRedux

はんのう

作成したコードはToolingによって1つのファイルに統合されます.

はんのうこ

react:構成部品の作成と管理(コア)
react-dom:構成部品DOMにレンダリング
構成部品をレンダリングする場合は、構成部品インスタンスを渡す必要があります.

ReactDOM.render(컴포넌트 인스턴스, DOM요소)

// 컴포넌트 클래스
const App = () => {
  return <div>Hi!</div>
}
// 컴포넌트 인스턴스
<App></App>

JSX構文を使用するファイルについては、reactを常にインポートする必要があります.
JSXはReact.createElementに変換された.
イベント処理関数の作成

onInputChange // on + 요소이름 + 이벤트 타입
handleInputChange // handle + 요소이름 + 이벤트 타입

入力については、formタグを使用します.
複数の異なるイベントハンドラ(ex、enterクリック、ボタンクリックなど)を登録する必要はなく、1つのイベントハンドラで処理できます.

せいぎょようそ

ステータス設定

から入力値のフォーム要素

構成部品管理

ユニット状態

入力時、イベントトリガは入力値を変更せず、stateで更新します.

<input value={state} onChange={()=>setState()} />

YouTube検索API

npm i youtube-api-search

import _ from 'lodash'
import YTSearch from 'youtube-api-search'

const videoSearch = _.debounce((term) => YTSearch({key: API_KEY, term},callback), 300)

レンダーリスト要素(Render List Element)

構造がはっきりしている

const App = () => {
  // 컴포넌트 배열 생성하여 변수에 저장
  const items = arr.map(ele=><Item item={ele} />)
  
  // 변수로 렌더링
  return <ul>{items}</ul>
}

空のPropsハンドル

残りのプロセスを実行しないように、上部のロードを返します.

const Item = ({item}) => {
  
  if(!item) return <div>Loading...</div>
  
  //로직
  return ...
}

ロードは、親レベルの高い構成部品で1つだけオフセットされます.
(各要素を配置すると、複数の回転体が表示されます.)

道徳的

アプリケーションステータス管理=>通常のJavaScriptオブジェクト
(構成部品の状態とは異なる)

reducerはステータス値を生成します
ステータスはcombineReducersにマッピングされます

const rootReducer = combineReducers({
  books: bookReducer
  activeBook: activeBookReducer
})

react-redux

はんのうディレクトリこうぞう
components:ビューを担当するコンポーネント
container:ワイヤによって管理されるステータスの構成部品(データ構成部品)に直接アクセス

リアクターとリアクターをつなぐ役割
STATEをデータコンポーネントに注入する=>container
クラス構成部品

import { connect } from 'react-redux'

class BookList extends Component {}

// 컴포넌트에게 전달될 props 객체 
function mapStateToProps(state, ownProps?) {
  return { books: state.books } 
};

// 컴포넌트에게 전달될 props 객체  
function mapDispatchToProps(dispatch, ownProps?) { 
  return bindActionCreators({ selectBook, }, dispatch)
};

export default connect(mapStateToProps,mapDispatchToProps)(BookList)

モラルライフサイクル

ユーザが直接または間接イベントトリガ(ex,ボタンクリック,選択)

をトリガする.
呼び出し

アクションジェネレータ=>戻りアクション(オブジェクト)

は、動作

を全てのReducerに送信する.
各Reduserは、既存の値または変更されたステータス値

を返します.

新しく戻ってきた州は、アプリケーションの状態に統合され、反応器

に転送される.

反応素子ツリーレンダリング

李徳思は李杜瑟の未定義の返還を禁止した.

// state 기본값 null로 설정
export default function(state=null,action){
}

redux-promise

冗長ミドルウェア:動作をパラメータ処理ロジックとして受信し、動作の関数を返します.
動作ペイロードがpromiseの場合、動作を停止した後、要求終了時に受信した値をペイロードにロードして渡す.
ミドルウェアの設定

const store = createStore(reducer,applyMiddleware(ReduxPromise));

アクション作成関数

export function fetchData(){
  const res = axios.get(url)
  return {
    type: FETCH_DATA,
    payload: res // 비동기 처리 없이 promise 전달
  }
}

さいせいき

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_DATA:
      // action.payload는 프로미스가 아닌 응답값
      return [action.payload.data, ...state];
  }
  return state;
}

ひばな線図

npm i [email protected]

// 차트 값 배열을 map함수를 사용하여 생성한다.
const data = cityData.list.map(weather => weather.main.temp);

<Sparklines height={120} width={180} data={data}>
  <SparklinesLine color={props.color} />
  <SparklinesReferenceLine type="avg" />
</Sparklines>

lodashを使用してグラフの平均値を取得

function average(data) {
  return _.round(_.sum(data) / data.length);
}

はんのうルータ

History:urlを観察して更新する
React-Router:新しいURLに一致するように、新しい構成部品を応答領域に転送します.