TIL:21709金(Redux)

2851 ワード
TIL テキストリンク

きょう習った

  • redux
  • 冗長プロジェクトフォルダの作成
    npx create-react-app redux-start dirname
    npm i redux

    • State特性


  • 1.サブエレメントまたは兄弟エレメント間の状態移動부모컴포넌트 --> 형제컴포넌트の形態はディボル値である.

  • 2.stateの伝達は素子間で密接に接続されている.

  • 3.兄弟構成部品が同じ状態を共有している場合、ステータスは上位構成部品上にある必要があります.
    (したがって、最上位コンポーネントには多くのステータスが存在する場合があります:適用されません)

    • Redux?

  • 予測可能な状態管理JavaScriptアプリケーションコンテナ
    • を提供する.
  • に書かれた状態特徴は,状態の複雑さを簡単に解決できる.
  • 2storeという名前の空間を配置し、素子の外部で状態にします.
    • 便利
  • メンテナンス.(actionとstate logレコードによる追跡)

    • Reduxの3つの原則

  • single source of truth
    ==> 同じデータは常に同じ場所からデータを取得します.
  • state is read-only
    ==>  修正が必要:리액트 : setState、리덕스 : action객체、
    • を使用
  • 純関数(feat.reduce)
    • のみ変更

    Store & Action & Reducer & dispatch

  • STORE 
    • 상태가 관리되는 유일한 공간 ! 
컴포넌트는 state에 접근해서 필요한 data를 가지고 오게됨
  • ACTION 
    • 1. store에 data를 운반해준다. 
2. `type`은 필수로 가진다.
  • REDUCER 
    • 1. current state와 action을 이용하여 new state를 생성하는 부분
2. action이  store에 data 전달할때 꼭 거쳐야 하는 곳.
3. 정교한 과정은 아래와 같아( dispatch가 추가됨) 
   -액션객체를 dispatch에 전달 
   -dispatch가 reducer를 호출한다. 
   -새로운 state 생성!
  • STATEの移動プロセス
    • 1. 브라우저에서 이벤트가 발생한다.
2. dispatch의 전달인자로 action 객체를 담아서
3. reducer 로 전달한다. 
4. reducerㅇ는 action객체의 타입에 따라 특정행동을 수행
5. new state를 반환한다.

    せきぶん


    まず、
  • 州の管理が必要かどうかを確認します.
    • Hello yii2
    Android マルチウインドウのライフサイクル