Skip to content

Instantly share code, notes, and snippets.

@a-m-dev
Last active July 18, 2018 09:07
Show Gist options
  • Save a-m-dev/30646d77e6fa596ac5c7396526ba71bf to your computer and use it in GitHub Desktop.
Save a-m-dev/30646d77e6fa596ac5c7396526ba71bf to your computer and use it in GitHub Desktop.
// #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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment