Connect a normal function to Redux's mapDispatchToProps

Question

I'm getting my head around Redux and while I understand how it functions I'm not entirely sure if I'm using it correctly.

The Redux Documentation gives plenty of example on how to connect a functional component to my actions. But is there any way to call my action directly from within a function?

Is it possible to get something like this to work?

function mapDispatchToProps(dispatch) {
  return {
    saveUserData: user => dispatch(saveUserData(user))
  };
}

function ConnectedUserInfo(){
  console.log("fetching user info")
  fetch('endpoint', 'headers',
  }).then(response =>
    response.then(user => {
      this.props.saveUserData(user)
    })
  )
}

const getUserInfo = connect(
  null,
  mapDispatchToProps
)(ConnectedgetUserInfo);
export default getUserInfo;

I tried setting my redux state directly with saveUserData(user) but couldn't get the Store to change. Connecting the two doesn't seem to do anything, unless I'm doing something wrong.

I'm unsure if this is the solution I'm looking for or if Redux wants me to mapDispatchToProps every time I want to change the state.

If I recall correctly, you wouldn't use `this.props` inside the function. ConnectedUserInfo would have a props argument (`function ConnectedUserInfo(props)`), and you would use `props.saveUserData(user)` instead. — wizloc, Jan 24 '20 at 15:49

Ayyappa Gollu · Answer 1 · 2020-01-25T01:21:44.907

1

if you read the react redux documentation , you can see that connect method returns an HOC which accepts only react components. in your code ConnectedgetUserInfo is not a react compoenent.

react-redux documentation: react-redux

react component defintion: https://reactjs.org/docs/react-component.html

also you have to name react component with starting character Capital.

edited Jan 25 '20 at 01:21

answered Jan 24 '20 at 15:56

Ayyappa Gollu

906
7
16

I understand the documentation, I just thought it seemed weird that I could only update the store from a component. Does that mean I would have to return my user info from an external function and THEN map it to store inside a React component? – lpetrucci Jan 24 '20 at 16:01
I just thought it seemed weird that I could only update the store from a component.---it is not weird. react-redux is built to cover most common usecases. – Ayyappa Gollu Jan 24 '20 at 16:26
also your function ConnectedUserInfo doesn't have any props as argument. if you want to dispatch an event you can move the fetching code inside useEffect of compoenent and then dipsatch once result is received. if you find this pattern repeated in many components you can use redux-thunk :https://stackoverflow.com/questions/35411423/how-to-dispatch-a-redux-action-with-a-timeout/35415559#35415559 – Ayyappa Gollu Jan 24 '20 at 16:30
my user info from an external function and THEN map it to store inside a React component--- if you want to store the fetched data only in single compoennt don't dipsatch it or use redux as you are not making it available globally. instead use a state hook and update the state inside your useEffect function where you are fetching data. – Ayyappa Gollu Jan 24 '20 at 16:34

score 0 · Answer 2 · edited Jan 24 '20 at 16:24

0

I recommend instead of mapdispatch or mapstate use useDispatch and useSelector from react-redux for functional components

import {useSelector,useDispatch} from 'react-redux;

const dispatch=useDispatch();
const stateSelector=useSelector(state=>({
    your states
}));

edited Jan 24 '20 at 16:24

Sohail Ashraf

10,078
2
26
42

answered Jan 24 '20 at 15:54

RamTn

99
5

Connect a normal function to Redux's mapDispatchToProps

2 Answers2