[React] Component, props, Redux, reducer

Component

反応の良さ!

の長いHTML段落を組み合わせて呼び出し、管理しやすく、コードが簡潔です.

名前

は通常大文字で始まり、

です.

は、最大値<>を返します.

コンポーネント化に適したHTML段落はどれですか?

繰り返し現れるコード

頻繁に変更されるコード

は、他のページを作成するときにも役立ちます.

しかし、stateは複雑になる.
他のfunc、構成部品で宣言された変数を参照するにはpropsを使用する必要があります.

props

サブアセンブリで親コンポーネントを使用するには

// 부모
function 부모Component(){
    let ]부모에있는state,setState] = useState('부모로부터');
    return(
        <>
            <자식Component 전송할이름={state명}>
        </>
    )
}

//자식
function 자식Component(props){
    return(
        <div>props.전송할이름</div>
    )
}

親から子供に伝わる場合、因子は複数であってもよい.
このように伝えられた子供には道具があります渡された名前を使用してアクセスできます.

Redux

ステータス管理ライブラリ!
props転送を必要とせず、すべての構成部品がその状態を使用できます.npm install redux react-redux

//index.js
import { Provider } from 'react-redux';
import { createStore } from 'redux';
let store = createStore( () => {
  return[
    {id:0, name: '멋진신발', quan:2}
  ]
})
    <Provider store={store}>
      <App />
    </Provider>

redoxデータとして使用するstateをcreateStore()として作成します.
コールバック関数はcreateStore()に入り、作成するステータスの初期値を返します.
作成したstateをpropsのようにProviderに渡します.

//App.js
import Cart from './Cart.js';
...
        <Route path="/cart" element={<Cart />}></Route>

//Cart.js
function Cart(props){
  return (
    {props.state[0].name}
  {/* stateToProps란 함수에서 state란 이름으로 return했으니  */}
  )
}

function stateToProps(state){ //여기인자의 state는 Provider에서 인자로 넘긴 store 변수임.
    return {
      state : state //인자state(리덕스의 store)를 state란 이름으로 return
    }
  }
  
export default connect(stateToProps)(Cart);
// stateToProps함수와 Cart.js를 이어준다

reducer / dispatch

reduxでデータを変更するには
1 . reduce関数を作成し、データ変更方法を定義します.

reducer(초기값,액션){
  return ()
}

アクション:変更データの情報を取得します.スケジュール内のすべてのオブジェクトを所有します.主にtype値オブジェクト(文字列など)形状を使用してブランチを作成する

//index.js
let 초기값 = [{id : 0, name : '멋진신발', quan : 2}];
function reducer(state = 초기값, 액션){
  if (액션.type === '수량증가') {
    let copy = [...state];
    copy[0].quan++;
    return copy
  } else {
    return state
  }
}
let store = createStore(reducer);

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

dispatchパラメータをtypeに「数量増加」を付与すると、reduceに対応する条件がある場合、対応するコードが実行されます!
2 . 変更時にdispatch()関数を呼び出し、reduce関数で定義されたように変更します.

useReducer

const[状態オブジェクト、dispatch関数]=userReducer(reduce関数、初期状態、初期関数)

const [state, dispatch] = useReducer(reducer, initialState);