Usage With React
It is not a requirement you should use React to use Redux Resource, but the two work well together. We recommend using the react-redux library to link Redux with React.
The following are some patterns that we find ourselves using frequently with Redux Resource.
Using mapStateToProps
mapStateToPropsWe recommend placing your calls to
getResources and getStatus within mapStateToProps. That way, you can access this information from any of the component's lifecycle methods, without needing to compute them within each method.For example:
1
import { getResources, getStatus } from 'redux-resource';
2
3
function mapStateToProps(state) {
4
const searchedBooks = getResources(state.books, 'searchResults');
5
const searchStatus = getStatus(state, 'books.requests.getSearchResults.status');
6
7
return {
8
searchedBooks,
9
searchStatus
10
};
11
}
Copied!
Type Checking with Prop Types
Redux Resource Prop Types exports a number of helpful prop types for common props that you'll pass into your React Components. Read the Redux Resource Prop Types documentation for more.
Using Request Statuses
Determining When a Request Succeeds
Sometimes, you want to know the exact moment that a request succeeds. You can do this within your components by comparing the previous state with the next state to determine when a request changes from one status to another.
We recommend performing this check within
componentDidUpdate. This might look like:1
import { getResources, getStatus } from 'redux-resource';
2
3
class BooksList extends Component {
4
render() {
5
// Render contents here
6
}
7
8
// Let's log to the console whenever a search result succeeds
9
componentDidUpdate(prevProps) {
10
if (this.props.searchStatus.succeeded && prevProps.searchStatus.pending) {
11
console.log('The search request just succeeded.');
12
}
13
}
14
}
15
16
17
function mapStateToProps(state) {
18
const searchStatus = getStatus(state, 'books.requests.getSearchResults.status');
19
20
return {
21
searchStatus
22
};
23
}
Copied!
This same approach can also be used to detect the moment that a request fails.
Last modified 2yr ago