I have come across this piece of code while learning react-redux
export const mapDispatchToProps = (dispatch, getState) => {
return ActionCreators({completeDriver}, dispatch, getState);
};
I want to know when to use this function.
as per redux actions are dispatched like dispatch(actionCreator())
for doing so inside an react component you need the reference of dispatch which need to be passed as prop to your component.
so if you use connect() you can reduce this passing of dispatch as prop by yourself this thing will be handed via connect HOC(Higher Order Component).
for larger scale application using mapDispatchToProps of connect would saves lot of dev time of wiring things.
Related
I'm trying to learn redux and the tutorial I'm following along has the following syntax in the userActions file
export const loginUser = (userData) => (dispatch) => {
dispatch({type: 'something'})
}
However when we call the loginUser function (in another file) the syntax is like this
this.props.loginUser(userData)
I was wondering where does the dispatch come from? Why don't we get dispatch is undefined for calling it in this manner
The dispatch function is made available because you're using redux-thunk, which is a redux middleware. And because of this middleware, your action is able to fire multiple dispatch to your reducer.
dispatch function comes from connect function of react-redux. Connect function receives mapStateToProps and mapDispatchToProps.
With mapStateToProps, redux map state from reducer to this.props of your component
With mapDispatchToProps, redux will call a function like login, after login redux will dispatch an action with some new states(optional) to let you know login success or failed. Those states will be passed into your component through mapStateToProps
Redux is a state container which is used to have a global state which can be access from all over the project. so we have to inform the global container about our state changes such as create,delete and updates. To inform the changes we use dispatch and we provide a referring name called type. in some cases we pass the data also to dispatch with the referring name of payload.
the first function you wrote was trying to login with the user data. the function is needed to be called in login component. so we pass the function as prop to the login component. now the login function is in your props so simply call is as
this.props.loginuser(userdetails)
I'm beginner, learning React with Redux, I came across a situation where,
These two code samples lead to the same result:
case 1: without using dispatch
export default connect(mapStateToProps,
{
getContacts : () => {
return {
type:GET_CONTACTS
}
}
}
)(Contacts);
case 2: using dispatch
export default connect(mapStateToProps,
dispatch => ({
getContacts : () => {
return dispatch({type:GET_CONTACTS})
}
})
)(Contacts);
Can someone explain me why does these two code examples work in the same way?
And why we don't need to use dispatch in case 1?
Both would result the same. There are two ways to define mapDispatchToProps.
Function form: Allows more customization, gains access to dispatch and optionally ownProps.
Object shorthand form: More declarative and easier to use.
Why to do dispatch instead of calling function normally?
In redux the store is single source of truth, the dispatch you are using is actually comes from store (store.dispatch).
If you call a function normally then it won't be aware by the store. That action won't pass through the middlewares (thunk/saga) that store is aware of and won't do perform store update via reducers.
If store is not updated, your connected components won't receive any updates. Eventually your UI won't re-render.
I need to call an action in mapStateToProps, how can I have it?
const mapDispatchToProps = {
someAction,
};
const mapStateToProps = (state, props) => ({
globalParameters: 'some code goes here ...',
relatedDropDownValue: someAction({SOME_TYPE}),
});
The real code is more complicated but I simplified it.
I need to call someAction but I don't know how to get it in mapStateToProps. Is it possible at all?
mapStateToProps is not the place to dispatch actions, rather just to map some state from redux store to the props in your component.
The logic should be refactored as such that the component can decide on what action to dispatch (i.e. useEffect).
So the component must have enough data from the store, to decide what parameters should be given to the action to dispatch.
If there is a need to fetch data, the component should decide to do that, just keep in mind that whatever you wanted to do in the mapStateToProps, should be moved into the component and be dealt with.
I am just wondering for Defining mapDispatchToProps As An Object how can I pass ownProps to it? like in the function I can pass props as an argument.
const mapDispatchToProps = (dispatch, ownProps) => {
toggleTodo: () => dispatch(toggleTodo(ownProps.todoId));
};
for an object how to pass ownProps?
const mapDispatchToProps = {
toggleTodo
};
My account got blocked by some down votes questions, the funny thing is I have to re-edit them, even though I already have the accepted answer.I do not understand what's the point to do this.I am so frustrated by this stackoverflow system.
Now, I basically can do nothing but keep editing my questions, and they have all been answered. This is ridiculous !!!
Short answer: You dont need to. You pass the props into each action as they are called and needed.
Long answer:
mapDispatchToProps connects your actions to dispatch in the component so you can call the action and pass in required props for it using this.props.action instead of awkwardly finding dispatch and using this.props.dispatch(action()) or similar.
I find it's simpler to connect your actions to your export and call the action this.props.addUser(prop1,prop2) when needed - onClick(), componentDidMount() etc. It by default assigns dispatch to it without needing to do mapDispatchToProps. So
export default connect(
mapStateToProps,
{action1, action2, addUser})(User)
then you can use:
addNewUser = () => {
this.props.addUser(this.state.person);
}
where you pass in the props you're after and then do any other work the action or reducer itself (depending on your preference of flow) such as:
export const addUser = user => ({
type: ADD_USER_SUCCESS,
payload: {user}
})
ownProps can't be passed to it without doing the wiring in mergeProps function passed in the connect function.
You see, when mapDispatchToProps is an object, whenMapDispatchToPropsIsObject is invoked. It in turn invokes wrapMapToPropsConstant which does this
constantSelector.dependsOnOwnProps = false
Now, this property is used to decide whether the action dispatcher should be invoked with props or not. See all handle* functions like handleNewPropsAndNewState in src/connect/selectorFactory.js
This is in contrast with what happens when mapDispatchToProps is a function. In this case, wrapMapToPropsFunc when invoked wraps the action dispatcher and then invokes it with props.
Without passing mergeProps, you'll need to forward id prop to the action creator in the Component that is connected with the mapDispatchToProp
e.g.
onClickToggleButton = () => {
const {id, toggleTodo} = this.props
toggleTodo(id)
}
I am new to react and redux xo my questions will sound basic.
What does dispatch means? I am referring to the term dispatching an action.
Why do we need mapDispatchToProps to store actions on redux? We can simply import an action and use it. I have a scenario in which I have to load data when a component is mounted.
#mariazahid mapDispatchToProps will bind the action to your component so that you can pass it down to your presentation components. This is a pattern that is normally used within using Redux with React.
You can import your action and just dispatch the action, but in most scenarios a container -> component pattern is used. A container is where the actions are mapped to and the state and the only goal of this component is to pass this data down to components that are used for presenting that data.
When working in teams, it's a pattern that is easily adoptable. Instead of importing actions from left right and center, you will just have to be aware of the container and how it passes the required actions/data down to the children.
From an implementation perspective, dispatch is just a method that is used to communicate with your reducers
Let say that your action looks something like this
function myAction() {
return { type: 'MY_ACTION' };
}
You're trying to communicate with the reducer that responds to the action type 'MY_ACTION'
In your mapDispatchToProps you'd typically do something like this;
function mapDispatchToProps(dispatch) {
return { actions: bindActionCreators(myActions, dispatch) }
}
Effectively, you're wrapping(binding) your actions to the dispatch method;
function bindActionCreators(actions, dispatch) {
// this is a very trivial implementation of what bindActionCreators does
let wrappedActions = {};
Object.keys(actions).forEach(action =>
// for every action, return a function that calls dispatch on the result of what your action returns
return function(...args) {
// remember here that dispatch is the only way you can communicate with the reducers and you're action's type will determine which reducer responds to return the new state
return dispatch(actions[action](..args));
}
);
}
And so, these "bound" actions are now assigned to a props.actions in your component.