Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 20 additions & 20 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
# Redux React Module Project: Movie CRUD
# Redux React Module Project: Movie CRUD cheyenne bowman

This module explored the redux philosophy, creation of the redux store and using connect to link state and action to arbitrary components.

Expand All @@ -17,45 +17,45 @@ In this project, you take a fairly complex application used to search a movie da

## Instructions
### Task 1: Project Set Up
* [ ] Create a forked copy of this project.
* [ ] Clone your OWN version of the repository in your terminal
* [ ] cd into the project base directory `cd web-module-project-redux`
* [ ] Download project dependencies by running `npm install``
* [ ] Start up the app using `npm start`
* [ .] Create a forked copy of this project.
* [ .] Clone your OWN version of the repository in your terminal
* [ .] cd into the project base directory `cd web-module-project-redux`
* [ .] Download project dependencies by running `npm install``
* [ .] Start up the app using `npm start`

### Task 2: Project Requirements
#### Setup Redux
> *The DOM and movie reducer has been provided for you, but it's up to to connect it to redux...*

* [ ] In index.js, make use of the createStore method and Provider component to link your App to redux.
* [. ] In index.js, make use of the createStore method and Provider component to link your App to redux.

#### Connecting the Movie reducer
> *Within the reducers folder is the movieReducers file. We have the state already setup it up here with some initial data. Let's connect that state to our component.*

* [ ] **In movieReducer.js, make sure that we are setting our state by default to initialState.** Otherwise your state will not have the original structure it needs to function!
* [. ] **In movieReducer.js, make sure that we are setting our state by default to initialState.** Otherwise your state will not have the original structure it needs to function!

* [ ] **The MovieList component prints all of our movies to the screen.** Use the connect method here to map the movies state value into props. Replace our static movie variable with that prop.
* [ .] **The MovieList component prints all of our movies to the screen.** Use the connect method here to map the movies state value into props. Replace our static movie variable with that prop.

* [ ] **The Movie component needs to access our list of movies to function.** Map movies to props here as well.
* [ .] **The Movie component needs to access our list of movies to function.** Map movies to props here as well.

* [ ] **Finally, MovieHeader uses appTitle to display the title text.** Connect this component to appTitle and test appTitle is correctly displayed in your app.
* [ .] **Finally, MovieHeader uses appTitle to display the title text.** Connect this component to appTitle and test appTitle is correctly displayed in your app.


#### Connecting the Delete and Add Movie actions
> *Looks like you got a good handle on mapping stateToProps! Now let's connect some actions.*

* [ ] Note that the deleteMovie reducer case and action creator are already available.
* [. ] Note that the deleteMovie reducer case and action creator are already available.

* [ ] **We can delete movies within the Movie Component.** Connect the deleteMovie action through the connect method.
* [ .] **We can delete movies within the Movie Component.** Connect the deleteMovie action through the connect method.

* [ ] **Find the HTML element that should trigger a deletion in the movie component.** Create and connect the necessary event handlers to call deleteMovie on the current movie's id. After setting the state, redirect the user using the push('/movies') command.
* [. ] **Find the HTML element that should trigger a deletion in the movie component.** Create and connect the necessary event handlers to call deleteMovie on the current movie's id. After setting the state, redirect the user using the push('/movies') command.

* [ ] Add in an ADD_MOVIE case to movieReducer.js.
* [ ] Make this new case return a version of state with new movie values passed in through the payload.
* [ ] Create an action creator for addMovie in movieActions.js.
* [ ] Find the component that triggers the adding of a movie and connect the addMovie action.
* [ ] Create and connect the necessary event handlers to call addMovie.
* [ ] Add in push('/movies/) after calling your action to trigger a redirect.
* [ .] Add in an ADD_MOVIE case to movieReducer.js.
* [. ] Make this new case return a version of state with new movie values passed in through the payload.
* [ .] Create an action creator for addMovie in movieActions.js.
* [ .] Find the component that triggers the adding of a movie and connect the addMovie action.
* [ .] Create and connect the necessary event handlers to call addMovie.
* [ .] Add in push('/movies/) after calling your action to trigger a redirect.

#### Build out the favorites reducer
> *Alright! Now that the movie reducer is complete, you have the chance to build a reducer from scratch to handle favorite movie functionality. We will also work on combining reducers.*
Expand Down
Loading