210715 Redux(1)

カートの作成

CartコンポーネントはCartページを作成し、ガイドバーを使用してTableを挿入します(ガイドフォームを少し変更します)

//Cart.js

import React from 'react';
import { Table } from 'react-bootstrap';

function Cart() {
  return (
    <div>
      <Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        <tr>
          <td>1</td>
          <td>Table cell</td>
          <td>Table cell</td>
          <td>Table cell</td>
        </tr>
      </Table>
    </div>
  )
}

export default Cart;

ルータを設定し/cartに接続すると、Cartコンポーネントが表示されます.

//App.js
<여러개 router들>
<Route path="/cart">
  <Cart></Cart>
</Route>

localhost:3000/cart接続でこのような画面が表示されます.

データをReduxに保持

npm install redux react-redux
yarn add redus react-reduxreduxpropsを使用することなく、すべてのサブコンポーネントが同じ値を共有できるようにします(=stateを渡すためにpropsを複数回繰り返す必要はありません)

index.jsProviderimport

import { Provider } from 'react-redux';

<Provider>で包む<App>プロバイダによって囲まれたすべての構成部品は、支柱を必要とせずに状態を共有できます.

createStore()関数を使用してステータスを作成し、プロバイダに渡します.

//index.js

let store = createStore(()=>{ return [{id: 0, name: '멋진신발', quan: 2}]})

ReactDOM.render(
..
    <Provider store={store}>
      <App />
    </Provider>
    ..
);

保存したデータを取り出す
storeのデータはpropsとして登録する必要があります.
厳密には、stateをpropsに変換して使用します.

まず、カーター.jsの一番下にstateをpropsにする関数を作成します.
export defaultを変更することもできます!

//Cart.js

function stateToProps(state){
  return{
    state: state   //자유롭게 작명: state 하면 됨
  }
}

export default connect(stateToProps)(Cart);  
//connect(stateToProps)가 또다른 함수를 리턴하기 때문에 괄호 두개 써야함
//export default Cart;

現在はstateをpropsとして使用することができ、propsを使用するようにCart(props)を書いてprops.state~を使用すればよい.名前を印刷してみます

function Cart(props) {
  return (
    <div>
      <Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        <tr>
          <td>1</td>
          <td>{ props.state[0].name }</td>
          <td></td>
          <td></td>
        </tr>
      </Table>
    </div>
  )
}

データの変更

map関数を使用してカートアイテムの更新に+/-ボタンを作成

function Cart(props) {
  return (
    <div>
      <Table responsive>
        <tr>
          <th>#</th>
          <th>상품명</th>
          <th>수량</th>
          <th>변경</th>
        </tr>
        {
          props.state.map((a, i) => {
            return (
            <tr key={i}>
              <td>{a.id}</td>
              <td>{a.name}</td>
              <td>{a.quan}</td>
              <td><button>+</button></td>
            </tr>)

          })
        }

      </Table>
    </div>
  )
}

redixを使用する第2の理由:state管理が簡単です.reducer()使用

//index.js
let defaultState = [
  {id: 0, name: '멋진신발', quan: 2},
  {id: 1, name: '멋진신발2', quan: 1}
];  //1. 따로 state변수를 만들고

function reducer(state = defaultState, action){
//2. reducer에 default 파라미터 문법으로 집어넣는다.
//(파라미터 입력 안하면 defaultState가 기본적으로 부여되는 파라미터가 됨)
  return state
}
let store = createStore(reducer);

reduce内でデータ修正方式を定義すればいいです.

function reducer(state = defaultState, action){
  if( action.type === '증가'){ 
  //액션.type === 수정방법이름(데이터 수정 조건)
  //'증가'라는 요청이 들어올 경우 어떤 state를 리턴할지 정의함
    let copy = [...state];
    copy[0].quan++;
    return copy
  }
  else{
    return state
  }
  
}

データの変更方法が定義されており、HTMLでボタンをクリックすると
データの変更方法を「追加」するようにコマンドできます.dispatch()関数の使用

//Cart.js
<td><button onClick={()=>{ props.dispatch({ type: '증가'}) }}>+</button></td>

+ボタンをクリックすると、数が1増えて成功!
reduxは、複数の要素が存在する場合に特に有用である.stateデータにエラーが発生した場合は、Reduxのreducerを確認するだけで、すべてのコンポーネントを検索する必要はありません.(reduceを使用してデータを変更できます)
=상태관리シンプル