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.

• 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.

• 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

Are you stuck? Feel free to ask me anything. I am here to help

Please do not continue until I have finished my review