-
Notifications
You must be signed in to change notification settings - Fork 26.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor with redux persist example (#13338)
Related to [11014](#11014) First and most important, removed the getInitialProps and used getStaticProps. Then, I refactored Counter, DataList and Examples components. I have refactored them from class-based components to functional. Also in each component the redux implementation was refactored using the new hooks API, which resulted in ~40% less code. If you want me to change anything or you are not satisfied with any given change, I'm open to suggestions.
- Loading branch information
1 parent
73c8b8c
commit 5a5e600
Showing
6 changed files
with
77 additions
and
121 deletions.
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
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,44 +1,20 @@ | ||
import { Component } from 'react' | ||
import { connect } from 'react-redux' | ||
import { bindActionCreators } from 'redux' | ||
import { useSelector, useDispatch } from 'react-redux' | ||
import { incrementCount, decrementCount, resetCount } from '../store' | ||
|
||
class Counter extends Component { | ||
increment = () => { | ||
const { incrementCount } = this.props | ||
incrementCount() | ||
} | ||
const Counter = () => { | ||
const counter = useSelector((state) => state.count) | ||
const dispatch = useDispatch() | ||
|
||
decrement = () => { | ||
const { decrementCount } = this.props | ||
decrementCount() | ||
} | ||
|
||
reset = () => { | ||
const { resetCount } = this.props | ||
resetCount() | ||
} | ||
|
||
render() { | ||
const { count } = this.props | ||
return ( | ||
<div> | ||
<h1> | ||
Count: <span>{count}</span> | ||
</h1> | ||
<button onClick={this.increment}>+1</button> | ||
<button onClick={this.decrement}>-1</button> | ||
<button onClick={this.reset}>Reset</button> | ||
</div> | ||
) | ||
} | ||
} | ||
|
||
function mapStateToProps(state) { | ||
const { count } = state | ||
return { count } | ||
return ( | ||
<div> | ||
<h1> | ||
Count: <span>{counter}</span> | ||
</h1> | ||
<button onClick={() => dispatch(incrementCount())}>+1</button> | ||
<button onClick={() => dispatch(decrementCount())}>-1</button> | ||
<button onClick={() => dispatch(resetCount())}>Reset</button> | ||
</div> | ||
) | ||
} | ||
const mapDispatchToProps = (dispatch) => | ||
bindActionCreators({ incrementCount, decrementCount, resetCount }, dispatch) | ||
|
||
export default connect(mapStateToProps, mapDispatchToProps)(Counter) | ||
export default Counter |
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,66 +1,53 @@ | ||
import { Component } from 'react' | ||
import { connect } from 'react-redux' | ||
import { bindActionCreators } from 'redux' | ||
import { useState } from 'react' | ||
import { useSelector, useDispatch } from 'react-redux' | ||
import { loadExampleData, loadingExampleDataFailure } from '../store' | ||
import { useEffect } from 'react' | ||
|
||
class DataList extends Component { | ||
state = { | ||
isDataLoading: false, | ||
} | ||
const DataList = () => { | ||
const dispatch = useDispatch() | ||
const exampleData = useSelector((state) => state.exampleData) | ||
const error = useSelector((state) => state.error) | ||
const [isLoading, setIsLoading] = useState(false) | ||
|
||
componentDidMount() { | ||
const { loadExampleData, loadingExampleDataFailure } = this.props | ||
const self = this | ||
useEffect(() => { | ||
setIsLoading(true) | ||
|
||
this.setState({ isDataLoading: true }) | ||
window | ||
.fetch('https://jsonplaceholder.typicode.com/users') | ||
.then(function (response) { | ||
.then((response) => { | ||
if (response.status !== 200) { | ||
console.log( | ||
'Looks like there was a problem. Status Code: ' + response.status | ||
) | ||
loadingExampleDataFailure() | ||
self.setState({ isDataLoading: false }) | ||
dispatch(loadingExampleDataFailure()) | ||
setIsLoading(false) | ||
return | ||
} | ||
response.json().then(function (data) { | ||
loadExampleData(data) | ||
self.setState({ isDataLoading: false }) | ||
response.json().then((data) => { | ||
dispatch(loadExampleData(data)) | ||
setIsLoading(false) | ||
}) | ||
}) | ||
.catch(function (err) { | ||
.catch((err) => { | ||
console.log('Fetch Error :-S', err) | ||
loadingExampleDataFailure() | ||
self.setState({ isDataLoading: false }) | ||
dispatch(loadingExampleDataFailure()) | ||
setIsLoading(false) | ||
}) | ||
} | ||
}, [dispatch]) | ||
|
||
render() { | ||
const { exampleData, error } = this.props | ||
const { isDataLoading } = this.state | ||
|
||
return ( | ||
<div> | ||
<h1>API DATA:</h1> | ||
{exampleData && !isDataLoading ? ( | ||
<pre> | ||
<code>{JSON.stringify(exampleData, null, 2)}</code> | ||
</pre> | ||
) : ( | ||
<p style={{ color: 'blue' }}>Loading...</p> | ||
)} | ||
{error && <p style={{ color: 'red' }}>Error fetching data.</p>} | ||
</div> | ||
) | ||
} | ||
} | ||
|
||
function mapStateToProps(state) { | ||
const { exampleData, error } = state | ||
return { exampleData, error } | ||
return ( | ||
<div> | ||
<h1>API DATA:</h1> | ||
{exampleData && !isLoading ? ( | ||
<pre> | ||
<code>{JSON.stringify(exampleData, null, 2)}</code> | ||
</pre> | ||
) : ( | ||
<p style={{ color: 'blue' }}>Loading...</p> | ||
)} | ||
{error && <p style={{ color: 'red' }}>Error fetching data.</p>} | ||
</div> | ||
) | ||
} | ||
const mapDispatchToProps = (dispatch) => | ||
bindActionCreators({ loadExampleData, loadingExampleDataFailure }, dispatch) | ||
|
||
export default connect(mapStateToProps, mapDispatchToProps)(DataList) | ||
export default DataList |
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,30 +1,24 @@ | ||
import { Component } from 'react' | ||
import { connect } from 'react-redux' | ||
import { startClock, serverRenderClock } from '../store' | ||
import { useEffect } from 'react' | ||
import { useDispatch } from 'react-redux' | ||
import { startClock, serverRenderClock, initializeStore } from '../store' | ||
import Examples from '../components/examples' | ||
|
||
class Index extends Component { | ||
static getInitialProps({ reduxStore, req }) { | ||
const isServer = !!req | ||
// DISPATCH ACTIONS HERE ONLY WITH `reduxStore.dispatch` | ||
reduxStore.dispatch(serverRenderClock(isServer)) | ||
const Index = () => { | ||
const dispatch = useDispatch() | ||
useEffect(() => { | ||
setInterval(() => dispatch(startClock(), 1000)) | ||
}, [dispatch]) | ||
|
||
return {} | ||
} | ||
|
||
componentDidMount() { | ||
// DISPATCH ACTIONS HERE FROM `mapDispatchToProps` | ||
// TO TICK THE CLOCK | ||
this.timer = setInterval(() => this.props.startClock(), 1000) | ||
} | ||
return <Examples /> | ||
} | ||
|
||
componentWillUnmount() { | ||
clearInterval(this.timer) | ||
} | ||
export async function getStaticProps() { | ||
const store = initializeStore() | ||
store.dispatch(serverRenderClock()) | ||
|
||
render() { | ||
return <Examples /> | ||
return { | ||
props: {}, | ||
} | ||
} | ||
const mapDispatchToProps = { startClock } | ||
export default connect(null, mapDispatchToProps)(Index) | ||
|
||
export default Index |
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