Skip to content

Instantly share code, notes, and snippets.

@mcabreradev
Created October 20, 2018 03:18
Show Gist options
  • Save mcabreradev/ee26dfd27db6060eaf673061d4a35168 to your computer and use it in GitHub Desktop.
Save mcabreradev/ee26dfd27db6060eaf673061d4a35168 to your computer and use it in GitHub Desktop.
React Redux cheatsheet
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);
}
};
import { combineReducers } from 'redux';
import data from './reducers';
export default combineReducers({
data
});
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);
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;
}
}
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;
export const FETCH_DATA = "FETCH_DATA";
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment