React Redux-1の使用

8614 ワード
React テキストリンク

使用理由


reduxを用いる理由は,素子内の素子の複雑な構造によりprops伝送が複雑で面倒になるためである.
そのため,すべての素子が同じ状態を共有できるようにReduxが誕生した.

使用方法


index.js
2行入力

import { Provider } from 'react-redux'
import { createStore } from "redux";
createStoreを使用してstoreのデータ値を設定
  
let store = createStore( () => {
  return [
    {
      id: 0, name: '멋진인생', quan: 2
    },
  ]
} )

  `Provider`로 App 컴포넌트 위에 감싸게 되면 같은 전역 state를 사용할 수 있기 때문
    
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById( "root" )
);
Cart.js
import { connect } from 'react-redux'
stateをpropsにするために,Cart関数にpropsを加える.

function Cart( props ) {

  return (
    <div></div>
  )
}
エクスポート時に、関数StatePropsChangeのstoreのデータを受信して状態値を設定する
function statePropsChange( state ) {

  return {
    state: state
  }

}
エクスポート時にconnectで関数名(親関数)を設定してエクスポートします.
export default connect( statePropsChange )( Cart )

結果


index.js

Cart.js


reduceが複数の場合!


複数のstoreステータスが追加されます.
この時は違う方法で宣言すべきだ.
index.js
let isAlert = true;
function reducer2( state = isAlert, action ) {
  if ( action.type === 'close' ) {
    return false
  } else {
    return state
  }
}
以前のようにreduce 2と宣言します.state = isAlertデフォルトのパラメータ構文値を入力しない場合はresetDataを追加します.Es 6(データ初期値)
 let store = createStore( combineReducers( { reducer, reducer2 } ) )
createStoreと宣言された変数をobject形式に変換
Cart.js
2つをcreateStoreに回すとログを撮ってください.
宣言の変数が現れる.

従って、下端出口の方法も変更する必要がある.
function statePropsChange( state ) {
  return {
    state: state.reducer,
    isAlert: state.reducer2,
  }
}

結果


サーバフォルダ構造
Chapter[オブジェクト向け]