React mapDispatchToProps Object Action Doesn't Work - reactjs

Question

I have this Action
export const UserIsLoggedIn = isLoggedIn => (
{ type: types.USER_IS_LOGGED_IN, isLoggedIn });
this actionConstant
export const USER_IS_LOGGED_IN = "USER_IS_LOGGED_IN";
index.js like this
import { UserIsLoggedIn } from "./redux/actions";
getUser = () => {
this.authService.getUser().then(user => {
if (user) {
this.props.UserIsLoggedIn(true);
}
}
}
const mapDispatchToProps = {
UserIsLoggedIn
}
export default connect(mapStateToProps, mapDispatchToProps) (Index);
so eventually with above code I get this.props.UserIsLoggedIn is not a function error, if I do UserIsLoggedIn(true); nothing happens... I don't quite understand where the problem is..
within the redux chrome extension I can dispatch with below without an error:
{
type: "USER_IS_LOGGED_IN", isLoggedIn : true
}
below is generally how index looks like
const store = configureStore();
class Index extends Component {
componentWillMount() {
this.getUser();
}
getUser = () => {
this.authService.getUser().then(user => {
if (user) {
console.log(this.props.isUserLoggedIn);
toastr.success("Welcome " + user.profile.given_name);
} else {
this.authService.login();
}
});
};
render() {
return (
<Provider store={store}>
<BrowserRouter>
<Route path="/" exact component={App} />
<Route path="/:type" component={App} />
</BrowserRouter>
</Provider>
);
}
}
function mapStateToProps(state) {
return {
isUserLoggedIn : state.User.isLoggedIn
}
}
const mapDispatchToProps = {
UserIsLoggedIn
}
export default connect(mapStateToProps, mapDispatchToProps) (Index);
ReactDOM.render(<Index />, document.getElementById("root"));
serviceWorker.unregister();
Note: Another aspect, mapStateToProps is not working either....

Answer 1

<Provider store={store}> needs to be wrapped around wherever this exported component is used. It can't be within the render method of Index. The way it is now, the connect method won't have access to your store.
You need something like:
ReactDOM.render(<Provider store={store}><Index /></Provider>, document.getElementById("root"));
and then remove the Provider portion from the render method in Index:
render() {
return (
<BrowserRouter>
<Route path="/" exact component={App} />
<Route path="/:type" component={App} />
</BrowserRouter>
);
}

Answer 2

You need to dispatch your action
const mapDispatchToProps = dispatch => ({
UserIsLoggedIn: (value) => {
dispatch(UserIsLoggedIn(value));
}
});
Update:
If you want to use the object syntax you need to wrap that action in a funciton:
const mapDispatchToProps = {
UserIsLoggedIn: (value) => UserIsLoggedIn(value),
};

Answer 3

Thank you #Yusufali2205 and #RyanCogswell for your help but those didn't fix the problem..
For people looking for an answer on this:
index.js is the first file in my React to load then App.js. With this setup, I have <Provider store={store}> inside index.js and inside index.js I don't have an access to the store within render method OR any lifecycles such as willmount or even didmount or willunmount. To access store, create it with <Provider store={store}> inside index.js and access store items within App.js.
About Dispatching action error, I still get Objects are not valid as a React child (found: object with keys {type, isLoggedIn}). If you meant to render a collection of children, use an array instead. error if I try to dispatch within render method with this code {this.props.UserIsLoggedIn(true)}.. I was attempting to do this just to see if dispatching worked, I don't plan to have it actually inside render. When I wrapped it with console.log, it worked fine, like this {console.log(this.props.UserIsLoggedIn(true))}..
When I moved these dispatchers to under a lifecycle method, they worked fine without console.log wrapper... like this
componentWillMount() {
console.log(this.props.isUserLoggedIn)
this.props.UserIsLoggedIn(true)
}