# Task: React-Router and Redux

## Task: React-Router and Redux

* Install react-router-dom
* Install redux
* Install react-redux
* Setup React-Router-Dom with browser-router
* Add a switch-component
* Add a route for the List-view (make it the root-route "/")
* Add a redirect for any other route than "/" that redirects to the root-route ("/")
* The router should ONLY render the List-view when the route is EXACTLY "/"
* If the route is anything other than "/" it should redirect to "/" (we will add additional routes in the next stage)
* Setup Redux
* Refactor your application to use Redux action-creators, actions and reducers
* The posts should be stored in a reducer
* Don't forget to connect your components (react-redux)
* You will run into a problem when handling async-actions. Can you figure out how to solve this problem? (hint, see: <https://redux.js.org/advanced/async-flow>)
* Add a loading-spinner, or just a loading-text to your list-view and render it whenever you are requesting posts/messages.
* Also handle the situation in which an error occurs when trying to fetch posts. You can mimick this situation by making requests to a non-existing route, or modifying the server-response. Show a warning about the problems that occured.&#x20;
* Add the means of pagination. This can be a button to load more posts, a button for a specific page-number, or an infinite scroll. The way to handle pagination is up to you.&#x20;
* Please note that you are allowed to use a tutorial - but I recommend trying with the official documentation first
* Ask another trainee for a review
* Process any feedback you get (only if you agree with the feedback)
* Finished? Ask me for a review

{% hint style="info" %}
Are you stuck? Feel free to ask me anything. I am here to help
{% endhint %}

{% hint style="warning" %}
Please do not continue until I have finished my review
{% endhint %}
