react+reduxを使用してカウンター機能を実装すると発生する問題

npm インストール redux react-redux

# React スキャフォールディングがインストールされていない場合は、このコマンドを実行して React スキャフォールディングをインストールします。npm install -g create-react-app
# react プロジェクトを作成する create-react-app プロジェクト名 # プロジェクトを入力する cd プロジェクト名 # redux をインストールする
npm インストール redux reate-redux

//index.js
'react' から React をインポートします。
'react-dom' から ReactDOM をインポートします。
'./App' から App をインポートします。
'redux' から createStore をインポートします。

定数初期状態 = {
  カウント: 0
}
関数リデューサー(状態 = 初期状態、アクション) {
  スイッチ（アクションタイプ）{
    ケース '増分':
      戻る {
        カウント: 状態.count + 1
      }
    ケース '減少':
      戻る {
        カウント: 状態.count - 1
      }

    デフォルト：
      状態を返す
  }
}
const ストア = createStore(リデューサー)

定数増分 = {
  タイプ: '増分'
}

定数減分 = {
  タイプ: '減少'
}

関数Count() {
  <div> を返す
    <button onClick={() => store.dispatch(increment)}>+</button>
    {store.getState().count}
    <button onClick={() => store.dispatch(decrement)}>-</button>
  </div>
}

ストア.subscribe( () => {
  コンソールログ(ストア.getState())
  ReactDOM.render() は、
    <React.StrictMode>
      <カウント />
    </React.StrictMode>,
    ドキュメント.getElementById('ルート')
  );
})

ReactDOM.render() は、
  <React.StrictMode>
    <カウント />
  </React.StrictMode>,
  ドキュメント.getElementById('ルート')
);

'react' から React をインポートします

関数Count() {
    <div> を返す
        <button onClick={() => store.dispatch(increment)}>+</button>
        {store.getState().count}
        <button onClick={() => store.dispatch(decrement)}>-</button>
    </div>
}

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

ReactDOM.render() は、
  // プロバイダ コンポーネントを使用して、グローバル コンポーネントがアクセスできる場所にストアを配置します。プロバイダでは、ストアを最も外側のコンポーネントに配置する必要があります <Provider store={store}><Count />></Provider>,
  ドキュメント.getElementById('ルート')
);

const mapStateProps = 状態 => ({
    カウント: 状態.カウント、
    '1' です
})
// connect のパラメータは関数です。この関数はストア内のステータスを取得できます。この関数はオブジェクトを返す必要があります。このオブジェクトに書き込まれたコンテンツは、コンポーネントの props プロパティにマップされます。// connect 呼び出しの後、関数が返されます。返された関数は、どのコンポーネントの props にマップする必要があるかを connect に伝えるために渡す必要があります。
エクスポートデフォルトconnect(mapStateProps)(Count)

定数増分 = {
    タイプ: '増分'
}

定数減分 = {
    タイプ: '減少'
}
関数Count({count, dispatch}) {
    <div> を返す
        <button onClick={() => {dispatch(increment)}}>+</button>
        <span>{count} 個</span>
        <button onClick={() => {dispatch(decrement)}}>-</button>
    </div>
}

// connect の 2 番目のパラメータは関数です。この関数のパラメータはディスパッチ メソッドです。オブジェクトを返す必要があります。このオブジェクトのプロパティはコンポーネントのプロパティにマップされます。const mapDispatchToProps = dispatch => ({
    増分（）{
        急送（{
            タイプ: '増分'
        })
    },
    減算（）{
        急送（{
            タイプ: '減少'
        })
    }
})

// connect のパラメータは関数です。この関数はストア内のステータスを取得できます。この関数はオブジェクトを返す必要があります。このオブジェクトに書き込まれたコンテンツは、コンポーネントの props プロパティにマップされます。// connect 呼び出しの後、関数が返されます。返された関数は、どのコンポーネントの props にマップする必要があるかを connect に伝えるために渡す必要があります。
エクスポートデフォルト connect(mapStateProps, mapDispatchToProps)(Count)

関数 Count({count,increment,decrement}) {
    <div> を返す
        <button onClick={increment}>+</button>
        <span>{count} 個</span>
        <button onClick={decrement}>-</button>
    </div>
}

エクスポート const increment = () => ({type: 'increment'})
エクスポート const decrement = () => ({type: 'decrement'})

'redux' から {bindActionCreators} をインポートします。
'./../store/actions/counter.actions' から counterActions として * をインポートします。


const mapDispatchToProps = ディスパッチ => (bindActionCreators(counterActions, ディスパッチ))
// connect のパラメータは関数です。この関数はストア内のステータスを取得できます。この関数はオブジェクトを返す必要があります。このオブジェクトに書き込まれたコンテンツは、コンポーネントの props プロパティにマップされます。// connect 呼び出しの後、関数が返されます。返された関数は、どのコンポーネントの props にマップする必要があるかを connect に伝えるために渡す必要があります。
エクスポートデフォルト connect(mapStateProps, mapDispatchToProps)(Count)

エクスポート const INCREMENT = 'increment'
エクスポート const DECREMENT = 'decrement'

'./../const/counter.const' から {INCREMENT、DECREMENT} をインポートします。
定数初期状態 = {
    カウント: 0
}
// eslint は次の行のインポートを無効にする / 匿名のデフォルトエクスポートを無効にする
エクスポート デフォルト (状態 = initialState、アクション) => {
    スイッチ（アクションタイプ）{
        ケース増分:
            戻る {
                カウント: 状態.count + 1
            }
        ケースデクリメント:
            戻る {
                カウント: 状態.count - 1
            }

        デフォルト：
            状態を返す
    }
}

'./../const/counter.const' から {INCREMENT、DECREMENT} をインポートします。

エクスポート const increment = () => ({type: INCREMENT})
エクスポート const デクリメント = () => ({type: DECREMENT})

'redux' から createStore をインポートします。
'./reducers/counter.reducers' からリデューサーをインポートします。

エクスポート const store = createStore(reducer)

'react' から React をインポートします。
'react-dom' から ReactDOM をインポートします。
'./components/Count' から Count をインポートします。
'./store' から { store } をインポートします
'react-redux' から { Provider } をインポートします。
/**
 * react-reduxは、reactとreduxの完璧な組み合わせです。 * プロバイダーは、作成されたストアをグローバルな場所に配置して、コンポーネントがストアを取得できるようにするコンポーネントです。
* connect はメソッドです */


ReactDOM.render() は、
  // プロバイダ コンポーネントを使用して、グローバル コンポーネントがアクセスできる場所にストアを配置します。プロバイダでは、ストアを最も外側のコンポーネントに配置する必要があります <Provider store={store}><Count />></Provider>,
  ドキュメント.getElementById('ルート')
);

関数 Count({count,increment,decrement}) {
    <div> を返す
        <button onClick={() => increment(5)}>+</button>
        <span>{count} 個</span>
        <button onClick={() => 減分(5)}>-</button>
    </div>
}

エクスポート const increment = payload => ({type: INCREMENT, payload})
エクスポート const decrement = payload => ({type: DECREMENT, payload})

エクスポート デフォルト (状態 = initialState、アクション) => {
    スイッチ（アクションタイプ）{
        ケースINCREMENT:
            戻る {
                カウント: state.count + action.payload
            }
        ケースデクリメント:
            戻る {
                カウント: state.count - action.payload
            }

        デフォルト：
            状態を返す
    }
}