210716 Redux(2)

6897 ワード
テキストリンク

他のstateデータをreduxとして作成する場合

//Cart.js
      <div className="my-alert">
        <p>지금 구매하시면 신규할인 20%</p>
        <button>닫기</button>
      </div>
この通知ウィンドウUIのステータスをstateとして保存し、閉じるボタンを押して消去します.
  • 初期状態、
    • を作成
  • 減速機をもう一つ作ればいい
    • //index.js
let defaultalert = true;
function reducer2(state = defaultalert, action){
  return state
}

let store = createStore(combineReducers({reducer, reducer2}));
    このとき,Combine Reducers()を用いて複数のreduceを一度に渡す.
    2つ以上の値がある場合、storeデータのフォーマットは少し異なりますので、Cart.jsでは、stateをpropsに変換する関数を変更する必要があります(筆者は関数名をstateToPropsと指定します).
    function stateToProps(state) {
  return {
    state: state.reducer,
    alertState: state.reducer2
  }
}
    減速機が複数あるなら、ちゃんと選んで使いましょう!!
    [閉じる](Close To)ボタンを押すと、[通知](Notification)ウィンドウが閉じます.
    //index.js
function reducer2(state = defaultalert, action){
  if (action.type==='close'){
    state = false
    return state
  }
  return state
}
    //Cart.js
{
 props.alertState === true
 ?(<div className="my-alert">
 <p>지금 구매하시면 신규할인 20%</p>
 <button onClick={()=>{ props.dispatch({ type: 'close' })}}>닫기</button>
 </div>)
 :null
}

    閉じるボタンを押すと消えます

    redoxstoreにすべてのデータを格納しないでください.
    通知ウィンドウUI(Cartなど)について.jsでのみ必要ですが、他のコンポーネントでは必要ありません.usStateを使用するのが最も便利でお勧めの方法です.

    変更要求時にdispatch()にデータを送信する場合


    dispatch({タイプ:要求名、ペイロード:送信するデータ})
    送信された資料はactionパラメータに格納されます.
  • 注文ボタンを押すと、カートに製品を追加できます.
    まず、注文ボタンを押すと一緒に送信されるデータを作成します.
    //Detail.js
<button className="btn btn-danger" onClick={() => {
   props.dispatch({type: '항목추가', payload: { id: 2, name: '새로운상품', quan: 1 }});
}}>주문하기</button>
    で、そのときprops.dispatch()を直接書くとエラーになるので、下部から接続する必要があります(もちろんconnect関数を上からインポートする必要があります)
    function stateToProps(state) {
  return {
    state: state.reducer,
    alertState: state.reducer2
  }
}

export default connect(stateToProps)(Detail);
//export default Detail;
    次に、このデータを変更するreduceに対して「プロジェクトの追加」アクションの条件文を記述します.
    //index.js
function reducer(state = defaultState, action){
  if(action.type === '항목추가'){
    let copy = [...state];
    copy.push(action.payload); //payload에서 넘어온 것을 push해라
    return copy
  }
  else if( action.type === '증가'){ //데이터 수정 조건
    let copy = [...state];
    copy[0].quan++;
    return copy
  } 
  else if (action.type === '감소'){
    let copy = [...state];
    copy[0].quan--;
    return copy
  }
  else{
    return state
  }
  
}
    Cartページにアクセスすると、追加されたデータは表示されません.
    ->開発環境では、ページを移動するとデータベースが初期化されるためです.
    ->ルータ関数historyを強制します.push()を使用してページを移動すると、データ+移動ページを追加してもデータは初期化されません.
    //Detail.js
<button className="btn btn-danger" onClick={() => {
   props.dispatch({type: '항목추가', payload: { id: 2, name: '새로운상품', quan: 1 }});
   history.push('/cart'); //강제로 페이지 이동
}}>주문하기</button>

    注文ボタンをクリックしてページの商品を追加


    propsに変換したデータを少し加工すればいいだけです.
    <button className="btn btn-danger" onClick={() => {
 props.dispatch({type: '항목추가', payload: { id: props.shoes[id].id, name: props.shoes[id].title, quan:1 }});
 history.push('/cart'); //강제로 페이지 이동
}}>주문하기</button>

    同じ商品を注文し続ける場合は、追加項目ではなく数量のみ追加します。

  • 条追加データからid値
    • を検索
  • 現在のショッピングバスケットにid値が同じ商品があるかどうかを検索します.
    ->ある場合は数量のみ追加
    ->ない場合は、プロジェクト
    • を追加します.findIndex()判別関数を満たす最初の識別子を返します.
    戻りタイプはNumberで、値がない場合は-1を返します.
    function reducer(state = defaultState, action){
  if(action.type === '항목추가'){
    let copy = [...state];
    //a는 copy안의 자료 하나하나를 뜻함
    let idx = state.findIndex((a)=>{return a.id === action.payload.id});
    if(idx>=0){
      copy[idx].quan++;
    }
    else{
      copy.push(action.payload);
    }
    return copy
  }
}
    講義のサンプルコードとは少し違いますが、ifelseで繰り返されるコードを前後に削除しただけです.
    Buttonを使用してGridViewのCheckBox選択行を削除
    [LWID] Westagram with react