冗長アプリケーション

udemyリスニングのredusを使用してCummers Webサイトを作成します.
これまでuser reducerを作成し、userがログインしているかどうかを表示していた場合、今回作成した機能はcartを詰めたgirlドロップダウンメニューのように見せることです.
まず、コンポーネントでcart-icon、cart-dropdownを作成し、cart-iconでアイコンを作成し、cart-dropdownでドロップダウンメニューの表示方法を構成し、sassを使用して装飾します.
これはホームページの上部タイトルの一部なので、ヘッダーコンポーネントに置いて、これからreduceを作成すればいいです.
reduceファイルでcartというフォルダを作成し、action、reduce、typesを作成します.
次にreduceに行って初期値を設定し、swtich文で論理を記述し、初期値がどのように変化するかを説明します.

ここでは状態をTOGLE CART HIDDENと定義する.(タイトルのカードアイコンを押すと切り替わります)
そしてroot-reduceに入れてReducerを作ってReducerを使う準備をします
これで、作成した構成部品とリビルダーを接続すればいいです.
カートの動作に合わせてcart-iconコンポーネントに移動し、下部にmapDispatchToPropsとcartIconを接続します.

mapDispatchToProps関数は、作成されたリダイレクタ操作を呼び出し、動作はリダイレクタを呼び出す方法です.
戻り値はhidden:!state.hiddenは、この値をcartIconのパラメータとして受け入れ、クリック時に状態を変化させる.

これで、トリップ情報をタイトルとして3つの演算子にバインドして、ドロップダウン・メニューを切り替えたときに表示できます.

const Header = ({ currentUser, hidden }) => (
 <div className="header">
   <Link className="logo-container" to="/">
     <Logo className="logo" />
   </Link>
   <div className="options">
     <Link className="option" to="/shop">
       SHOP
     </Link>
     <Link className="option" to="/shop">
       CONTACT
     </Link>
     {currentUser ? (
       <div className="option" onClick={() => auth.signOut()}>
         SIGN OUT
       </div>
     ) : (
       <Link className="option" to="/signin">
         SIGN IN
       </Link>
     )}
     <CartIcon />
     {/* <Cart currentUser ={currentUser}/> */}
   </div>
   {hidden ? null : <Cart />}
 </div>
);
// root- reducer 에 access있는 함수.
const mapStateToProps = ({ user: { currentUser }, cart: { hidden } }) => ({
 currentUser,
 hidden,
});

export default connect(mapStateToProps)(Header);
//값이 변경되었을때만 re-render됨. 

ヘッダもconnectを用いて処理し,mapStateToPropsを用いる.このとき,ヘッダはuserの状態とcartの状態を有し,これをdestructing処理とし,ヘッダのパラメータとして送信する.
ソース
connect:reduceが提供するconnect関数では、storeの更新時に値を読み込むことができます.
connect(mapStateToProps,mapDispatchToProps)は、2つのパラメータを受け入れます.
mapStateToProps:ショップステータスが変更されるたびに呼び出され、ショップのすべてのステータスを受信し、nullが再ロードされた場合、またはショップ変更時に再ロードされない場合、コンポーネントが必要なオブジェクトを返します.
mapDispatchToProps:関数/オブジェクトであってもよく、関数であれば、構成部品の作成時に1回呼び出し、dispatchをパラメータとして受信し、動作受信のオブジェクトに戻る.
オブジェクトの場合、アクションの作成者となり、アクションを呼び出すときにpropsとして使用されます.
を選択して設定できます.