Skip to content

Instantly share code, notes, and snippets.

@rowlandekemezie
Last active April 1, 2019 09:43
Show Gist options
  • Save rowlandekemezie/eeacbd06cbc704f256471632afa8a479 to your computer and use it in GitHub Desktop.
Save rowlandekemezie/eeacbd06cbc704f256471632afa8a479 to your computer and use it in GitHub Desktop.
// Dependencies
const { applyMiddleware, createStore } = Redux;
const createSagaMiddleware = ReduxSaga.default;
const { put, call, takeLatest } = ReduxSaga.effects;
const { connect, Provider } = ReactRedux;
// GitHub API
const gitHubApi = (username) => {
// Make API calls here
};
// Action creator
const getUserDetails = (payload) => {
return {
type: 'LOAD_USER_REQUEST',
payload
}
}
// Reducer
const userReducer = (state = {}, action) => {
switch (action.type) {
case 'LOAD_USER_SUCCESS':
return action.user;
default:
return state;
}
};
// Sagas goes here
// UserProfile component
class UserProfile extends React.Component {
constructor() {
super();
}
componentDidMount() {
this.props.getUserDetails('rowlandekemezie');
}
render() {
const { user } = this.props;
return (
// Render user details here
)
}
}
// Store setup goes here
- - - -
// Map the store's state to component's props.
const mapStateToProps = (state) => ({
user: state
});
// Wrap action creator with dispatch method.
// This way getUserDetails is passed in as props.
const mapDispatchToProps = (dispatch) => ({
getUserDetails: (username) => dispatch(getUserDetails(username))
})
// React-redux connect function links our React component to Redux store
const UserProfilePage = connect(
mapStateToProps,
mapDispatchToProps)(UserProfile);
// Mount our component to the DOM
const element = document.getElementById('root');
ReactDOM.render(
<Provider store={store}>
<UserProfilePage />
</Provider>,
element, 0
);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment