'How to pass Redux Reducer pointer to React Context?

So in short I am trying to pass a reducer to a context file and have it so that if the state of reducer is updated then I can view that new state in the context file.

Here is my reducer:

function StillUploadReducer(state = true, action){
switch (action.type){
  case 'stillUpload':
    return action.payloadData

  default:
    return state
  }
}

Heres how im passing it to a firebase context file:

const addData = await firebase.addExercise(
      Data,
      props.StillUploadReducer
    );

In the context file i do a console.log of the value and i get the original value passed in. The main issue with this is I want the ability for the user to change the state of the reducer while I await on a video being uploaded so that if the state has changed then it is reflected in the context file. The user changes the reducer using the action:

const StillUpload = (dataToPass) => {
  return{
    type: 'stillUpload',
    payloadData: dataToPass,
  }
 }

I have console logged the value of the reducer outside the context file and i can see it is being updated I just dont know how to see that change reflected in the context file. Does anyone have any ideas? Thx ahead of time.



Solution 1:[1]

A reducer is just a pure function. It has no state, so passing the reducer as an argument to another function cannot achieve what you want. I'm not sure what you mean by "context file" or what firebase.addExercise does, but you should most likely instead use the useSelector hook which is exactly designed for a component to rerender every time the corresponding part of the state changes. You should also not use mapStateToProps anymore which is a legacy API for the legacy class components.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Guillaume Brunerie