React-Redux connecting two separate component with a toggle

I know this is probably a very basic question, but it’s more of a "I don’t understand the docs please help me" type of question.

I’m trying to connect two components using React-Redux: the first is a sidebar, and the second is a modal that should appear when clicking on a button in the sidebar. The components are not related in any parent-child relation (except root) so I assume redux is the best option.

I’ve read all the redux (and react-redux) docs and I understand the core concepts of redux, but I’m having trouble understanding how to implement them in my components.

Basically I want a button in the sidebar that toggles a stored state (true/false is enough) and according to that state the modal would appears (state==true => display:block) and disappear via a button in the modal (state==false => display:none).

What I think I need is an action to toggle a state, for example:

const modalsSlice = createSlice({
    name: 'modals',
    reducers: {
        toggleModal(state, action){
            state = !state;

then connecting the action in both components (I’m writing the components in classes not as functions) by using:

const toggleModal = {type: 'modals/toggleModal', payload: ''};
const mapStateToProps = state => state.showHideModal;

export default connect(mapStateToProps, toggleModal)(Component);

Now, assuming I’m correct so far, I’m not sure how to continue. I.e. how am I suppose to receive and make the change in the components themselves? Sure, I need to put a function in a button with a onClick={foo} listener but how does the foo suppose to receive and handle the state? And am I suppose to initialize the showHideModal state somewhere? In the root component? While configuring the store?

Any help would be much appreciated.

84 thoughts on “React-Redux connecting two separate component with a toggle”

  1. Pingback: ivermectin dose
  2. Pingback: buy stromectol 6mg
  3. Pingback: praziquantel price