//あとでレデューサーでも使うので、constしておく。
export const INCREMENT = 'INCREMENT'
export const DECREMENT = 'DECREMENT'

//それぞれをアクションクリエイターとよぶよ
export const increment = () => ({
        type:INCREMENT
})

export const decrement = () => ({
        type:DECREMENT
})

import { INCREMENT,DECREMENT } from '../actions'

//初期状態のオブジェクトを入れる変数名をinitialStateとする。
const initialState = { value:0 }//初期のカウント

//関数として定義。引数はstate、acitonとして２つ持つ
export default(state =initialState, action) => {
    //actionのtype（INCREMENTかDECREMENTか）はaction.typeという処理で拾える
    switch(action.type){
        case INCREMENT://INCREMENTを拾った場合は値をプラス1する。
            return { value:state.value + 1}
        case DECREMENT://同様に、DECREMENTの場合はマイナス。
            return { value:state.value - 1}
        default: //初期状態は0のまま
            return state
    }
}

//すべてのreducsersをここでまとめてしまうcombineReducers を取り込む。
import { combineReducers } from 'redux'
//count.jsから取得
import count from './count'

//storeで使うので、Reducerで決めた数値をエクスポートする。
export default combineReducers({ count })
//なお、今回は受け渡す値は「count」一つだが
//いろいろな状態を管理したい場合は
//export default combineReducers({ foo,bar,baz }) みたいな感じ

import React, { Component } from 'react';
//コネクト関数を追加
import { connect } from 'react-redux'
import { increment, decrement } from '../actions'


class App extends Component {
  //counterには、レデューサーのカウンター内のオブジェクトの値の値を渡す。propsで受け取ってる。
  render(){
    const props = this.props
      return(
      <React.Fragment>
        <div>counter:{props.value}</div>
        <button onClick={props.increment}> +1</button>
        <button onClick={props.decrement}> -1</button>
      </React.Fragment>
    )
  }
}

//mapStateToPropsは、stateの情報から、componentに必要な情報を受け渡す
const mapStateToProps = state => ({ value:state.count.value})
//アクションが実行された時に、該当のアクションを渡し、状態遷移をさせるのがディスパッチ
const mapDispatchToProps = dispatch => ({
  increment: () => dispatch(increment()),
  decrement: () => dispatch(decrement())
})
//connect関数でstoreと描写側がつながるらしい。
export default connect(mapStateToProps,mapDispatchToProps)(App)

import React from "react";
import ReactDOM from 'react-dom';
//createStoreはstoreを利用するためのもの
import { createStore } from 'redux'
//Providerはすべての環境でstoreを使うためのもの
import { Provider } from 'react-redux'
import './index.css';
import reducer from './reducers';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';

//ここで作られるstoreはアプリ内の唯一のものになる
const store = createStore(reducer)

//既存のコンポーネントを、providerコンポートネントで囲み、store属性に、
//上のconstしたstoreを当てはめる。これで、バケツリレーをせずにproviderが使える
//この中の<App />が【4】でrenderされてるもの。
ReactDOM.render(
<Provider store={store}>
    <App />
</Provider>,
 document.getElementById('root')
);

registerServiceWorker();//?