pass-props-to-container.mo
Last updated
Last updated
In this article, we will see how to have access to and use the props of a component inside its container.
Usually, developers need to have access to the props of a component inside its presentational part (the .component.js file) and not its container. Thus, they use the object form of mapStateToProps and mapDispatchToProps, which don't have access to the props of the component but are easier to use and write.
a react project: create one with
, make sure to install redux and react-redux
Create a simple component's container, for example a Todo component:
This is a standard container, with a selector giving access to a list of events to the component and an action to create a todo event.
Refactor your container to keep the same behavior but using the function way.
To make sure you use the function way correctly, refactor your code but don't change the behavior of your code!
The function way works exactly the same as the object way but gives you access to more features because you have now access to dispatch
function.
CHECK
The behavior must be the same! Test that everything works like before.
(If it works differently, this is not a refactoring).
Give access to the props of your component to your container
We want to have access to 2 props, hasAdminAccess
and canAddEvent
.
Now you can give a specific action and a specific selector to your container depending on the props of your component!
CHECK 1
If you give hasAdminAccess
and canAddEvent
props to the container set to true, you should have the same behavior than before
CHECK 2
If you give hasAdminAccess
or canAddEvent
props to the container set to false, your behavior will be different and you will only be able to see a limited number of events and only make an adding request