1 つの記事で React における Redux の初期の使用を理解する

'react' から React、{ Component、Fragment } をインポートします。

//クラスをインポートimport { connect } from 'react-redux';

//フック import { useSelector, useDispatch } from 'react-redux'

'../../redux/actions/count' から { add, clear } をインポートします。


//表示コンポーネントをフックする const CountItem = (props) => {
    // const を分解する {
        カウント、
        フラグ、
        追加、
        クリア
    } = 小道具
    戻る （
        <>
            <h2>現在の合計: {count}</h2>
            <h3>現在のフラグ: {flag ? 'true' : 'false'}</h3>
            <button onClick={add}>+1 をクリック</button>
            <button onClick={clear}>クリア</button>
        </>
    ）
}

// コンテナコンポーネントをフックする const Count = () => {
    定数 count = useSelector(state => state.sum)
    const flag = useSelector(state => state.flag)
    定数ディスパッチ = useDispatch()

    定数countAdd = () => {
        コンソールログ(追加.タイプ)
        ディスパッチ(追加(1))
    }

    定数clearNum = () => {
        ディスパッチ(クリア())
    }

    戻り値: <CountItem count={count} flag={flag} add={countAdd} clear={clearNum} />
}

エクスポートのデフォルト数



// クラス表示コンポーネント // クラス Count は Component を拡張します {
// 追加 = () => {
// // 通知の再実行
// this.props.add(1);
// };
// クリア = () => {
// this.props.clear();
// };
// 与える（） {
// 戻る （
// <フラグメント>
// <h2>現在の合計は: {this.props.count}</h2>
// <h3>現在のフラグ: {this.props.flag ? 'true' : 'false'}</h3>
// <button onClick={this.add}>+1 をクリック</button>
// <button onClick={this.clear}>クリア</button>
// </フラグメント>
// );
// }
// }

// クラスコンテナコンポーネント // デフォルトのエクスポート connect(
// // 1. 状態 // state => ({ count: state.sum, flag: state.flagState }),
// // 2. メソッド // { add, clear }
// )(カウント);

// Count コンポーネントのアクション オブジェクトを作成します // 定数をインポートします import { ADD, CLEAR } from '../constant';

// アクションオブジェクトを追加する関数を作成する export const add = data => ({
    タイプ: ADD、
    データ、
});

// アクションオブジェクトをクリアする関数を作成する export const clear = data => ({
    タイプ: クリア、
    データ、
});

エクスポート const ADD = 'add';
エクスポートconst CLEAR = 'clear';

// Countコンポーネントのリデューサーを作成する
// リデューサーは2つのパラメータを受け取ります: 前の状態のpreState、アクションオブジェクトのアクション

'../constant.js' から {ADD、CLEAR} をインポートします。

// 初期状態を設定します。const initState = 0;

デフォルトの関数 addReducer(preState = initState, action) をエクスポートします。
    // アクションから型とデータを取得する
    const { 型、データ } = アクション;
    //型に基づいてデータの処理方法を決定する switch (type) {
        ケース追加:
            preState + データを返します。
        ケースクリア:
            0を返します。
        // 初期化アクションのデフォルト:
            preState を返します。
    }
}

'react' から React をインポートします。
'react-dom' から ReactDOM をインポートします。
'./App.jsx' からアプリをインポートします。
'./redux/store' から store をインポートします。
'react-redux' から { プロバイダー } をインポートします。

ReactDOM.render() は、
    // プロバイダはAppをラップします。目的: Appのすべての子孫コンテナコンポーネントがストアを受け取ることを可能にします
    <プロバイダーストア={store}>
        <アプリ />
    </プロバイダー>,
    ドキュメント.getElementById('ルート')
);

// ドキュメント全体にはストア オブジェクトが 1 つだけあります。createStore は 2 つのパラメータを受け取ります。1 つ目は状態ツリー、2 つ目は処理されるアクションです。
//applyMiddleware はすべてのミドルウェアを配列に集約し、それらを順番に実行して、非同期的に処理します。import { createStore, applyMiddleware } from 'redux';
//ミドルウェアimport thunk from 'redux-thunk';
//すべてのリデューサーを要約する
'./reducers/index' から allReducers をインポートします。
//Google のデバッグ ツールの具体的な使用方法は次のとおりです: Baidu import { composeWithDevTools } from 'redux-devtools-extension';

// ストアを公開する
デフォルトのcreateStore(allReducers、composeWithDevTools(applyMiddleware(thunk)))をエクスポートします。