Setup Redux and Redux-Saga #170
There are no files selected for viewing
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
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,7 +1,50 @@ | ||
| /* eslint-disable react/destructuring-assignment */ | ||
| import React, { Component } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| import { connect } from 'react-redux'; | ||
| import TestSaga from './testSaga'; | ||
|
|
||
| export class HomeComponent extends Component { | ||
| onIncrement = () => { | ||
|
There was a problem hiding this comment. you should move the actions to the ducks folder There was a problem hiding this comment. @Kachulio1 Could you please expound more on what you mean by saying I should move the actions to the ducks folder. |
||
| this.props.dispatch({ | ||
| type: 'INCREMENT', | ||
| }); | ||
| } | ||
|
|
||
| onDecrement = () => { | ||
| this.props.dispatch({ | ||
| type: 'DECREMENT', | ||
| }); | ||
| } | ||
|
|
||
| onIncrementAsync = () => { | ||
| this.props.dispatch({ | ||
| type: 'INCREMENT_ASYNC', | ||
| }); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <TestSaga | ||
| increment={this.onIncrement} | ||
| decrement={this.onDecrement} | ||
| incrementAsync={this.onIncrementAsync} | ||
| value={this.props.value} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| HomeComponent.propTypes = { | ||
| value: PropTypes.number.isRequired, | ||
| dispatch: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| function mapStateToProps(state) { | ||
| return { | ||
| value: state.home, | ||
| }; | ||
| } | ||
|
|
||
| export default connect(mapStateToProps)(HomeComponent); | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import React from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
|
|
||
| const TestSaga = ({ | ||
| increment, decrement, incrementAsync, value, | ||
| }) => ( | ||
| <div> | ||
| <h1 className='home__title'>Welcome to Andela Societies</h1> | ||
| <div className='home__container'> | ||
| <button type='button' onClick={increment}> | ||
| Increment | ||
| </button> | ||
| {' '} | ||
| <button type='button' onClick={decrement}> | ||
| Decrement | ||
| </button> | ||
| {' '} | ||
| <button type='button' onClick={incrementAsync}> | ||
| Increment after 1 second | ||
| </button> | ||
| <hr /> | ||
| <div> | ||
| Clicked: | ||
| {' '} | ||
| {value} | ||
| {' '} | ||
| times | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
| TestSaga.propTypes = { | ||
| value: PropTypes.number.isRequired, | ||
| increment: PropTypes.func.isRequired, | ||
| decrement: PropTypes.func.isRequired, | ||
| incrementAsync: PropTypes.func.isRequired, | ||
| }; | ||
|
|
||
| export default TestSaga; |
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import reducer from './operations/reducers'; | ||
|
|
||
| export default reducer; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { delay } from 'redux-saga'; | ||
| import { call, put, takeEvery } from 'redux-saga/effects'; | ||
|
|
||
| export function* incrementAsync() { | ||
| yield call(delay, 1000); | ||
| yield put({ type: 'INCREMENT' }); | ||
| } | ||
|
|
||
| export function* watchIncrementAsync() { | ||
| yield takeEvery('INCREMENT_ASYNC', incrementAsync); | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| const initialState = 0; | ||
|
|
||
| export default function reducer(state = initialState, action) { | ||
| switch (action.type) { | ||
| case 'INCREMENT': | ||
| return state + 1; | ||
| case 'INCREMENT_IF_ODD': | ||
| return (state % 2 !== 0) ? state + 1 : state; | ||
| case 'DECREMENT': | ||
| return state - 1; | ||
| 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| // eslint-disable-next-line import/prefer-default-export | ||
| export { default as home } from './Home'; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,8 +1,22 @@ | ||
| import React from 'react'; | ||
| import { render } from 'react-dom'; | ||
| import { BrowserRouter as Router } from 'react-router-dom'; | ||
|
|
||
|
|
||
| import { Provider } from 'react-redux'; | ||
| import configureStore from './store'; | ||
| // eslint-disable-next-line import/no-named-as-default | ||
| import HomeComponent from './app/Home/components/HomeComponent'; | ||
|
|
||
| import './styles/main.scss'; | ||
|
|
||
| const store = configureStore(); | ||
alexmochu marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
|
||
| render( | ||
| <Provider store={store}> | ||
| <Router> | ||
| <HomeComponent /> | ||
| </Router> | ||
| </Provider>, | ||
| document.getElementById('root'), | ||
| ); | ||
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| import { combineReducers } from 'redux'; | ||
| import * as reducers from '../app'; | ||
|
|
||
| const rootReducer = combineReducers(reducers); | ||
|
|
||
| export default rootReducer; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { all } from 'redux-saga/effects'; | ||
| import { watchIncrementAsync } from '../app/Home/operations/home.data'; | ||
|
|
||
| // single entry point to start all Sagas at once | ||
| export default function* rootSaga() { | ||
| yield all([ | ||
| watchIncrementAsync(), | ||
| ]); | ||
| } |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,22 @@ | ||
|
|
||
|
|
||
|
There was a problem hiding this comment. in jest, config ignore store and other .config files There was a problem hiding this comment. @Kachulio1 I have ignored the files that are bringing the coverage down. |
||
| import { applyMiddleware, createStore } from 'redux'; | ||
| import createSagaMiddleware from 'redux-saga'; | ||
| import { composeWithDevTools } from 'redux-devtools-extension'; | ||
|
|
||
| import rootReducer from './reducers'; | ||
| import rootSaga from './sagas'; | ||
|
|
||
| export default function configureStore(initialState) { | ||
| const sagaMiddleware = createSagaMiddleware(); | ||
| const middlewares = [sagaMiddleware]; | ||
| const middlewareEnhancer = applyMiddleware(...middlewares); | ||
|
|
||
| const enhancers = [middlewareEnhancer]; | ||
| const composedEnhancers = composeWithDevTools(...enhancers); | ||
|
|
||
| const store = createStore(rootReducer, initialState, composedEnhancers); | ||
|
|
||
| sagaMiddleware.run(rootSaga); | ||
| return 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,3 +2,7 @@ | |
| text-align: center; | ||
| color: '#FD5523' | ||
| } | ||
|
|
||
| .home__container { | ||
| text-align: center; | ||
| } | ||
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
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
this needs to be in devDependencies
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The above libraries when listed on 'devDependencies' are causing bundling errors that they should be listed on 'dependencies'.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
not all just "redux-devtools-extension"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
and 'babel stuff'
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@Kachulio1 The babel stuff is already in devDependencies. Installing redux-devtools-extension in devDependencies is causing the following compilation error. It should be in dependencies.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ok maybe keep 'the dev tool then