In this task you're given a version of The Index that still relies on internal application state
- Fork the repository
- Clone it.
cd
into the project directory.- Install the required packages for the task.
$ yarn install
- Run the project
$ yarn start
- Take some time to explore the code, take a look at the files and the comments and the code itself.
- Talk it out. Discuss it with your fellow developers.
- Ask questions. That's what we're here for - you don't need to use the question form to ask these questions!
-
Make sure you have installed the Redux Dev Tools
-
Create your
redux
folder with the following structure:
redux
├── actions
| ├── actionType.js (a file that holds all of your action types as strings)
| ├── authors.js (actions related to the authors store)
| ├── books.js (actions related to the books store)
| ├── index.js (a file that exports all your action functions from one place)
├── reducers
| ├── authors.js (the reducer that handles author actions)
| ├── books.js (the reducer that handles book actions)
| ├── index.js (a file that combines all the reducers and returns a root reducer)
├── index.js (a file that creates and returns a redux store)
- In
src/index.js
import your store and wrap theApp
in aProvider
Refactor the entire application to use Redux.
Things to note:
- You should be able to lose almost all internal state except in
AuthorList
andBookList
- they should still keep their filtering functionality as internal state. - To avoid completely losing your mind, we recommend you build things in the following order:
- All states, actions and reducers related to fetching
authors
- All states, actions and reducers related to fetching
books
- Refactor
AuthorDetail
so that it uses the data from both stores. It shouldn't need to make a request any more.
- All states, actions and reducers related to fetching
- If you choose to
connect
yourApp
component, you have to wrap it inwithRouter
:
import { Switch, Route, Redirect, withRouter } from "react-router-dom"; // Import
...
export default withRouter(connect(mapStateToProps)(App)); // Wrap
- Push your code.