reduxの動作原理と使い方の説明

store.dispatch(アクション);

次の状態を todoApp(前の状態、アクション) とします。

//リスニング関数を設定します store.subscribe(listener);

関数リスナー() {
  newState を store.getState() に格納します。
  コンポーネントを新しい状態に設定します。   
}

//createStore を導入します。これは、redux でコア ストア オブジェクトを作成するために特に使用されます。import {createStore, applyMiddleware} from 'redux'
//Countコンポーネントを提供するリデューサーを導入する
'./count_reducer' から countReducer をインポートします。
//非同期アクションをサポートするためにredux-thunkを導入する
'redux-thunk' から thunk をインポートします
//ストアを公開する  
//applyMiddlewareはthunkを使用した中間位置です
デフォルトのcreateStoreをエクスポートします(countReducer、applyMiddleware(thunk))

const initState = 0 //初期化状態エクスポートデフォルト関数countReducer(preState=initState,action){
	// コンソールログ(preState);
	//アクションオブジェクトから取得: タイプ、データ
	const {type,data} = アクション
	//型に基づいてデータの処理方法を決定する switch (type) {
		case 'increment': // 追加する場合は、preState + data を返す
		case 'decrement': //減少の場合はpreState - dataを返す
		デフォルト：
			preState を返す
	}
}

// パブリックindex.js
'./redux/store' からストアをインポートします。

//subscribeはストア内のデータが変更されたときにデータを更新します。ここに記述すると、グローバルstore.subscribe(()=>{
	ReactDOM.render(<App/>,document.getElementById('root'))
})

//Count UI コンポーネントをインポートします import CountUI from '../../components/Count'

//UIコンポーネントとreduxを接続するためのconnectを導入する
'react-redux' から {connect} をインポートします

-----------------------------------------------------------
/* 
	1. mapStateToProps 関数はオブジェクトを返します。
	2. 返されたオブジェクトのキーはUIコンポーネントのpropsに渡されるキーとして使用され、値はUIコンポーネントのpropsに渡される値として使用されます。
	3.mapStateToPropsは状態を渡すために使用されます*/
関数 mapStateToProps(状態){
	{count:state} を返す
}
-----------------------------------------------------------------
/* 
	1. mapDispatchToProps 関数はオブジェクトを返します。
	2. 返されたオブジェクトのキーはUIコンポーネントのpropsに渡されるキーとして使用され、値はUIコンポーネントのpropsに渡される値として使用されます。
	3.mapDispatchToPropsは操作ステータスメソッドを渡すために使用されます*/
関数 mapDispatchToProps(dispatch){
	戻る {
		jia:number => ディスパッチ(createIncrementAction(number))、
		jian:number => ディスパッチ(createDecrementAction(number))、
		jiaAsync:(数値、時間) => ディスパッチ(createIncrementAsyncAction(数値、時間))、
	}
}
// connect()() を使用して Count コンテナ コンポーネントを作成して公開します export default connect(mapStateToProps,mapDispatchToProps)(CountUI)
//エクスポートのデフォルト接続の改善(
	状態 => ({count:state}),
	
	//mapDispatchToPropsの一般的な記述 /* dispatch => ({
		jia:number => ディスパッチ(createIncrementAction(number))、
		jian:number => ディスパッチ(createDecrementAction(number))、
		jiaAsync:(数値、時間) => ディスパッチ(createIncrementAsyncAction(数値、時間))、
	}) */

	//mapDispatchToProps の省略形 {
		jia:createIncrementAction、
		jian:createDecrementAction、
		jiaAsync:createIncrementAsyncAction、
	}
）（カウント）

/* 
	このファイルは、Count コンポーネントのアクション オブジェクトを生成するために特に使用されます*/
'../constant' から {INCREMENT,DECREMENT} をインポートします

//同期アクションとは、アクションの値が Object 型の一般的なオブジェクトであることを意味します。export const increment = data => ({type:INCREMENT,data})
エクスポート const decrement = data => ({type:DECREMENT,data})

// 非同期アクションとは、アクションの値が関数であることを意味します。非同期アクションは通常、同期アクションを呼び出しますが、非同期アクションは必須ではありません。
エクスポート const incrementAsync = (データ、時間) => {
	戻り値 (ディスパッチ) =>{
		タイムアウトを設定します(()=>{
			ディスパッチ(増分(データ))
		}、時間）
	}
}