// #01 creating action file (./src/js/actions/courseActions.js)
export function createCourse(course) {
  return { type: 'CREATE_COURSE' , course }
}




// #02 creating reducer file (./src/js/reducers/courseReducer.js)
export default function courseReducer(state = [] , action) {
  switch(action.type) {
    case 'CREATE_COURSE':
      return [
        ...state ,
        Object.assign({} , action.course)
      ]

    default:
      return state;
  }
}




// #03 creating root reducer file named as index.js in reducers folder (./src/js/reducers/index.js)
import { combineReducers } from 'redux'
import courseReducer from './courseReducer'

const rootReducer = combineReducers({
  // this part of state == must handled by == this reducer
  course: courseReducer
})

export default rootReducer;





// #04 creating configureStore file in store folder (./src/js/store/configureStore.js)
import { createStore , applyMiddleware } from 'redux'
import rootReducer from '../reducers/index'
// import reduxImmutableStateInvarient from '@types/redux-immutable-state-invariant'


export default function configureStore(initialState) {
  return createStore(
    rootReducer,
    initialState,
    applyMiddleware()
  )
}





// #05 provideing store to all components in index.jsx file (./src/js/index.jsx)
// import 'babel-polyfill'
import React from 'react'
import ReactDOM from 'react-dom'
// redux
import configureStore from './store/configureStore'
import { Provider } from 'react-redux'
// components
import App from './components/App'
// css
import '../scss/app.scss'


const store = configureStore();


ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('app')
)




// #06 connect your component to redux and use it