How do I trigger a call to dispatch using React Hooks?

Question

I have a save function in a component that makes some calls to an API and changes my local state based on the response. I then want to dispatch an action once AND ONLY ONCE these calls to setState are complete e.g.

const [myData, setMyData] = useState([{id: 0, name: "Alex"}]);

const save = async () => {

    if (someCondition) {
        let response = await axios.get("/someroute");
        if (response.status === 200) {
            setMyData([...myData, response.data])])
        }
    }

    if (someOtherCondition) {
        let response2 = await axios.get("/someotherroute");
        if (response2.status === 200) {
            setMyData([...myData, response2.data])])
        }
    }

    dispatch(myAction(myData));
}

Now I know that useEffect should be the way to go about this. e.g.

useEffect(() => {
    dispatch(myAction(myData));
}, [myData]);

however i'm changing myData at other places in the component, and I only want to dispatch the action once save() has been called and the setMyData calls have finished. I can't think of a condition to check for in useEffect() except maybe adding some kind of flag to myData, like an object saying "Ready to save", but it feels like there should be a simpler way.

Massively appreciate any help on this one!

I don't know why are you asking this question but it doesn't matter at how many places, your data is being changed. If your question is about that whether your data is dirty or not after user clicks on save then you can only achieve this by another state variable. — fazlu
– fazlu, Commented Jun 1, 2020 at 18:32
Thanks Ahmad, I had this thought of using another state variable soon after I asked the question. Can you elaborate on what you mean by dirty data? — Alex
– Alex, Commented Jun 1, 2020 at 18:51
I mean let's user saved the data, and now he clicks again on the save button. in this case , data won't be dirty so you don't have to save it again because by keeping the dirty variable, you'll be know whether user changed the data or not. — fazlu
– fazlu, Commented Jun 1, 2020 at 18:53

Kerem atam · Accepted Answer · 2020-06-01 19:03:31Z

What do you mean by changing myData at other places? Are you changing myData by fetching it from somewhere? Because if you don't, setMyData will do its job pretty straightforward and fast. So your save function won't need to listen it.

If you change myData as a result of some other fetching and save function should wait it. Then story can little bit complicated. You might like to check middlewares and redux sagas.

I have hard time to understand your scenario and use case; but if state overwriting is your concern during consecutive fetch actions then saga middleware can take care of it.

For example you can create some saga middleware with takeLatest so that it will take last action that dispatched and kill the previous one (not waiting) that ongoing; so you would avoid data overwrite that might occur due side effect. Or similarly you might want to use takeEvery, which will queue every action for setting myData and they will wait each other to end.

check more : https://redux-saga.js.org/

and usage example : https://codesandbox.io/s/385lk3x6v1?file=/src/sagas/index.js

jdnichollsc · Accepted Answer · 2020-06-01 19:18:14Z

0

It's looks like you need to use useReduce instead and then you are able to detect when any of the props change with the useEffect:


const initialState = {
  id: null,
  name: null,
  ...
}
const [state, dispatch] = useReducer((state, action) => {
  switch (action.type) {
    case 'CHANGE-NAME':
      return { ...state, name: action.value }
    default:
      throw new Error('Type not defined')
  }
}, initialState)

useEffect(() => {
  // Notify changes!!
}, [state.name]);


...
const myFun = async () {
  // do something
  dispatch({ type: 'CHANGE-NAME', value: 'Hello world' })
}

Also you can add other props to your initial state, for example if you need a specific flag to detect an action once :)

Regards

answered Jun 1, 2020 at 19:18

jdnichollsc

1,5791 gold badge24 silver badges45 bronze badges

Collectives™ on Stack Overflow

How do I trigger a call to dispatch using React Hooks?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related