Created
October 20, 2018 03:18
-
-
Save mcabreradev/ee26dfd27db6060eaf673061d4a35168 to your computer and use it in GitHub Desktop.
React Redux cheatsheet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { FETCH_DATA } from './types'; | |
export const fetchRestaurants = () => async (dispatch, getState) => { | |
try { | |
const response = await axios.get("/service"); | |
const data = response.data.data; | |
dispatch({ | |
type: FETCH_DATA, | |
payload: data | |
}); | |
} catch (error) { | |
console.error(error); | |
} | |
}; | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { combineReducers } from 'redux'; | |
import data from './reducers'; | |
export default combineReducers({ | |
data | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { connect } from 'react-redux'; | |
import { actionSample } from '../../store/actions/actions'; | |
import { ComponentSample } from '../../components'; | |
const mapStateToProps = state => ({ | |
dataSample: state.data.dataSample, | |
}); | |
const mapActionToProps = { | |
actionSample | |
}; | |
export default connect(mapStateToProps, mapActionToProps)(ComponentSample); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { FETCH_DATA } from '../actions/types'; | |
const initialState = { | |
data: [] | |
}; | |
export default function (state = initialState, action) { | |
switch (action.type) { | |
case FETCH_DATA: | |
return { | |
...state, | |
data: action.payload | |
}; | |
default: | |
return state; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { createStore, applyMiddleware, compose } from 'redux'; | |
import thunk from 'redux-thunk'; | |
import rootReducer from './reducers'; | |
const initialState = {}; | |
const middleware = [thunk]; | |
const store = createStore( | |
rootReducer, | |
initialState, | |
compose( | |
applyMiddleware(...middleware), | |
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() | |
) | |
); | |
export default store; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
export const FETCH_DATA = "FETCH_DATA"; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment