redux settingUp nutshell

// #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
import React from 'react';
import { connect } from 'react-redux'
import * as courseActions from '../../actions/courseActions'

class CoursesPage extends React.Component {
  constructor(props) {
    super()
  }
  
  componentDidMount() {
    this.props.dispatch
  }

  render() {
    return(
      ...
    )
  }
}

function mapStateToProps(state, ownProps) {
  return {
    courses: state.courses
  }
}

// #01 first way to call your action creator is to ignore mapDispatchToProps in connect , by that yo gonna have dispatch directly in your props and you gonna be able to use it like => this.props.dispatch(courseActions.createCourse(this.state.course)) 
// #02 second way is to bind it by hand like below but when u have mutple action creators, this way is becoms pain in the ass 
CoursesPage.propTypes = {
  createCourse: PropTypes.func.isRequired, // => proptype is function <=
  courses: PropTypes.array.isRequired
}
function mapDispatchToProps(dispatch) {
  return {
    createCourse: course => dispatch(courseActions.createCourse(course))
  }
}


// #03 this way is the best 
// remmber to import { bindActionCreators } from 'redux'
// by this way bind action creators will get all actioncreators from courseAction file and wrap them by dispatch automatically
// this iws the way we do it
CoursesPage.propTypes = {
  actions: PropTypes.object.isRequired, // => proptype becomes object <=
  courses: PropTypes.array.isRequired
}
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(courseActions , dispatch)
  }
}



export default connect(mapStateToProps, mapDispatchToProps)(CoursesPage)