How to manage the state using Redux - reactjs

Question

I'm working on a project, I'm using Django as backend, React as frontend and Redux as state manager. I want to pass a function from my login and register component to my Header component, whereas my header component is not a root component I can't pass params directly to other components. I know redux can solve this problem but I don't know how?
I have two separate links in my header component (Login, Register), I mean when I click on login it should call the openLoginModal() from my login component and the same process for register component
My header component
import React, { Component, Fragment } from "react";
import { Link } from "react-router-dom";
export class Header extends Component {
render() {
return (
<Fragment>
<nav className="navbar navbar-expand-sm ">
<div className="container">
<button
className="navbar-toggler"
type="button"
data-toggle="collapse"
data-target="#navbarTogglerDemo01"
aria-controls="navbarTogglerDemo01"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span className="navbar-toggler-icon"></span>
</button>
<div className="collapse navbar-collapse" id="navbarTogglerDemo01">
<a className="navbar-brand" href="/">
Todos
</a>
<ul className="navbar-nav ml-auto mt-2 mt-lg-0">
<Link to="/register">
<button className="btn btn-outline-primary btn-sm mx-2">
Register
</button>
</Link>
<Link to="/login">
<button className="btn btn-outline-primary btn-sm">
Login
</button>
</Link>
</ul>
</div>
</div>
</nav>
</Fragment>
);
}
}
export default Header;
I also used react-awesome-modal for creating login and register modal, here is my login component
import React, { Component, Fragment } from "react";
export class Login extends Component {
constructor(props) {
super(props);
this.state = {
visible: false,
username: "",
password: "",
};
}
openLoginModal() {
this.setState({
visible: true,
});
}
closeLoginModal() {
this.setState({
visible: false,
});
}
render() {
const { username, password } = this.state;
return (
<Fragment>
<section>
<Modal
visible={this.state.visible}
width="400"
height="300"
effect="fadeInUp"
onClickAway={() => this.closeLoginModal()}
>
<div>
<form>
<div className="form-group">
<label>Username</label>
<input
type="text"
className="form-control"
name="username"
value={username}
/>
</div>
<div className="form-group">
<label>Password</label>
<input
type="password"
className="form-control"
name="password"
value={password}
/>
</div>
<div className="form-group">
<button className="btn btn-primary btn-sm my-2">Login</button>
</div>
</form>
</div>
</Modal>
</section>
</Fragment>
);
}
}
export default Login;

Answer 1

Just only store variable isOpenModal into the state of redux and add 2 action creator
openModal() {
return { type: 'OPEN_MODAL' }
}
closeModal {
return { type: 'CLOSE_MODAL'
}
change state through reducers (file reducers)
// another code
switch(action.type) {
case 'OPEN_MODAL':
state.isOpenModal = true;
break;
case 'CLOSE_MODAL':
state.isOpenModal = false;
break;
// another code
}
In file Header use mapDispatchToProps to call 2 action creator openModal and closeModal as created above.
In file Login use mapStateToProps to use state isOpenModal in state of redux.