We will learn how to dispatch a Redux action after the data has been fetched and recap how to do it when the route changes.
There is one small annoying thing in the code. When you set proper types
VisibleTodoList.propTypes = { filter: PropTypes.oneOf(['all', 'active', 'completed']).isRequired, receiveTodos: PropTypes.func.isRequired, toggleTodo: PropTypes.func.isRequired, };
Then you have one time warning (see bellow) Is there any chance to postpone creation of component to not have such warninings?
warning.js:36 Warning: Failed prop type: The prop receiveTodos
is marked as required in withRouter(Connect(VisibleTodoList))
, but its value is undefined
.
in withRouter(Connect(VisibleTodoList)) (created by App)
in App (created by Route)
in Route (created by Root)
in Router (created by BrowserRouter)
in BrowserRouter (created by Root)
in Provider (created by Root)
in Root
printWarning @ warning.js:36
warning @ warning.js:60
checkReactTypeSpec @ checkReactTypeSpec.js:80
validatePropTypes @ ReactElementValidator.js:162
createElement @ ReactElementValidator.js:216
App @ App.js:32
(anonymous) @ ReactCompositeComponent.js:305
measureLifeCyclePerf @ ReactCompositeComponent.js:75
_constructComponentWithoutOwner @ ReactCompositeComponent.js:304
_constructComponent @ ReactCompositeComponent.js:279
mountComponent @ ReactCompositeComponent.js:187
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
performInitialMount @ ReactCompositeComponent.js:370
mountComponent @ ReactCompositeComponent.js:257
mountComponent @ ReactReconciler.js:45
mountComponentIntoNode @ ReactMount.js:104
perform @ Transaction.js:143
batchedMountComponentIntoNode @ ReactMount.js:126
perform @ Transaction.js:143
batchedUpdates @ ReactDefaultBatchingStrategy.js:62
batchedUpdates @ ReactUpdates.js:97
_renderNewRootComponent @ ReactMount.js:319
_renderSubtreeIntoContainer @ ReactMount.js:401
render @ ReactMount.js:422
(anonymous) @ index.js:22
(anonymous) @ bundle.js:47
webpack_require @ bundle.js:20
(anonymous) @ bundle.js:40
(anonymous) @ bundle.js:43
warning.js:36 Warning: Failed prop type: The prop toggleTodo
is marked as required in withRouter(Connect(VisibleTodoList))
, but its value is undefined
.
in withRouter(Connect(VisibleTodoList)) (created by App)
in App (created by Route)
in Route (created by Root)
in Router (created by BrowserRouter)
in BrowserRouter (created by Root)
in Provider (created by Root)
in Root
Firstly, I thank you for your course. It's very useful for completely understanding Redux. But I have one small question here. Did you forget about updating code for the reducer todos.js with the new action “RECEIVE_TODOS” ? Finally, the Redux store couldn’t save the fetched data todos from the faked API. Thank you in advance for your response.