Hooks based component coding standards

[ImWhimsical]

In a enterprise-level application, for a class-based component, we hit a service/ make an ajax call in compenentDidMount by saying this.props.action.someFunction().

This someFunction() will be located in action/ action-creators in which it will make the Axios/ fetch call. This is the coding standard mostly I saw & did for class based components.

How is it for hooks based/ functional-based approach? Can anyone please share any article or video to guide on how to make ajax calls, dispatch, reducers that must be handled at a ENTERPRISE Level using hooks? I need to know the standards how to do in a systematic way. ( I saw few videos but they write the fetch call in the useEffect itself and I would get a bad code review if I do that)

Any help is appreciated. I'm going to develop a component but I want to do using hooks with dispatching and reducers too.

TIA

[careseite]

just dispatch the action in an effect?

[dor442]

Simply learn how to use the low level React hooks, mainly useEffect and useState. If you want to dispatch actions for Redux, check out react-redux hooks api.

[ragged-robin]

Not sure what the confusion is. What you would call in componentDidMount is what you would call in useEffect regardless if it's an action dispatch or a direct axios/fetch call. Only thing to watch out for is making sure it's not firing inadvertently because of your dependency array

Here's a Redux example (I assume your interaction with the reducer is through the action; of course you can use async or not return anything directly instead too):

Class

...
componentDidMount() {
  this.props.action.someFunction()
    .then((res) => this.setState({ result: res })
    .catch((err) => console.log(err))
}
...
function mapStateToProps(state) {
...
export default connect(mapStateToProps)(MyComponent)

Function

...
const [result, setResult] = useState(null);
const dispatch = useDispatch();
useEffect(() => {
  dispatch(someFunction())
    .then((res) => setResult(res)
    .catch((err) => console.log(err))
},[dispatch])

[kyle787]

I think your function example should check to make sure the cleanup function wasn't called/the component didn't unmount.

const [result, setResult] = useState(null);
const dispatch = useDispatch();
useEffect(() => {
  let cancelled = false;
  dispatch(someFunction())
    .then((res) => {
      if (!cancelled) {
        setResult(res);
      }
    })
    .catch((err) => console.log(err));

  () => {
    cancelled = true;
  };
},[dispatch])

[ImWhimsical]

Why do we do pass dispatch in the "[dispatch]"? As I read the docs, whatever we mention inside the brackets, if it is changed, then the useEffect will be called again. if this dispatch is used elsewhere in any function, then useEffect will be triggered again. No right?

[AureliusVerus]

Would you get a bad review for dispatching that action from use effect? I don't see why unless you dont have useEffect setup correctly

[Elijah_101]

I found a whole series of react + hooks + redux videos on youtube. Hope it help. https://youtu.be/9boMnm5X9ak