-
Notifications
You must be signed in to change notification settings - Fork 13
/
Copy pathstep-by-step
61 lines (53 loc) · 2.1 KB
/
step-by-step
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
1. create 5 dirs:
- actions
- components
- constants
- reducers
- containers
2. create the files:
- ./store.js
- ./reducer.js
- ./actions/index.js
- ./constants/index.js
3. open ./index.js
- import { Provider } from 'react-redux'
- import the store and history from './store'
- import the ConnectedRouter from 'connected-react-router'
- import Route and Switch from 'react-router-dom'
- Configure the store
- Surround the root component by the Provider passing it the store
- Then wrap it by ConnectedRouter passing it the history
- Wrap all the routes by the Switch
- Put each page in the app inside a Route component passing it the path and the page component
4. open ./store.js
- import the following:
- createStore, applyMiddleware from redux
- createLogger form redux-logger
- composeWithDevTools from redux-devtools-extension/developmentOnly
- rootReducer from ./reducer
- routerMiddleware from connected-react-router
- createBrowserHistory from history
- thunk from redux-thunk
- create and export the history object
- init the middleware array with [thunk, routerMiddleware(history)]
- if in development mode, put the createLogger() middleware in the middlewares
- export a default function that configures the store taking initState as param
- the function returns createStore(rootReducer(history), initState, composeWithDevTools(applyMiddleware(middlewares)))
5. open ./reducer.js:
- import combineReducers from redux
- import connectRouter from connected-react-router
- export default a constant function taking the history as param and returns:
- combineReducers({...reducers, router: connectRouter(history)})
6. Define the constants:
- Define the API urls
- Define Custom App constants
- Define anything that could lead to mispelling errors as constant
7. Define the actions:
- Select Category
- Select Language
- Fetch Configurations
- Fetch Genres
- Search Movies
- Fetch Movies
- Fetch Movie
- Fetch Reviews