Redux - Dispatching Action (onClick Event)

Question

I am simply trying to connect() my LoginPage (component) to my Redux Store and dispatch in action via a onClick (event). When I console.log(this.props) my dispatch handler login() isn't in the component's props.

GitHub Repo -- https://github.com/jdavis-software/demo.git

Question: Why isn't my Redux Store either connection or dispatching the actions?

LoginPage:

import React, { Component} from 'react'; import { connect } from 'react-redux'; export class LoginPage extends Component<any> { render(){ console.log('props doesnt have contain - login(): ', this.props) return (<button onClick={ () => '' }>Login</button>) } } const mapProps = state => ({ user: state.user }) const dispatchProps = (dispatch) => { return { login: () => dispatch({ type: 'USER_LOGGED_IN', payload: true}) } } export default connect(mapProps,dispatchProps)(LoginPage)

Redux Configuration:

import { IStore, IUser } from '@interfaces'; import { createStore, combineReducers } from 'redux'; import ReduxPromise from 'redux-promise'; // reducers import userReducer from './user.reducer'; // define the intial global store state const initialState:IStore = { user: { isAuthenticated: false } } const appReducer = combineReducers({user: userReducer}) export default createStore(appReducer,initialState);

User Reducer:

// initial state const initalState:IUser = { isAuthenticated: false } // reducer const userReducer = (state:IUser = initalState, { type, payload}: IPayload): IUser => { console.log('user reducer start', state) switch (type) { case 'USER_LOGGED_IN': state = { ...state, isAuthenticated: payload } break; default: return state; } return state; }; export default userReducer;

Root Page:

import React from 'react'; import { render } from 'react-dom'; import { Provider } from 'react-redux'; // styles import './index.scss'; // pages import { App } from '@pages'; // store import store from './core/store/store'; render( <Provider store={store}> <App/> </Provider>, document.getElementById('app') );

@JamieHutber yeah I've been looking at that just trying to get this to work before I rewire everything. — Jordan Davis
– Jordan Davis, Commented Oct 7, 2020 at 11:49

aadi-git · Accepted Answer · 2020-10-08 14:17:34Z

I checked your code on git repository. I found out that you're exporting the named export

export class LoginPage

and the default export,

export default connect(mapProps,dispatchProps)(LoginPage)

But when you're accessing it, you're accessing it as

import { /*Other components*/ , LoginPage } from '@pages'

So it is actually taking the named exported component which is not connected to store.

I suggest you to import as

import LoginPage , { /*Other components*/ } from '@pages'

This might solve your problem.

Rohitha · Accepted Answer · 2020-10-07 15:00:59Z

1

Return statements are missing in the properties of connect.

const mapProps = state => { return {user: state.user} } const dispatchProps = (dispatch) => { return { login: () => dispatch({ type: 'USER_LOGGED_IN', payload: true}) } } export default connect(mapProps,dispatchProps)(LoginPage)

Updated: Please check Redux-dispatch

edited Oct 7, 2020 at 15:00

answered Oct 7, 2020 at 11:25

Rohitha

7493 silver badges8 bronze badges

2 Comments

Jordan Davis Over a year ago

That wouldn't make a difference the arrow function default returns, but just for piece of mind I tried it out and didn't change anything.

Rohitha Over a year ago

yes, but as you had added curly braces that won't make sense either you have to add return or you need to enclose by function brackets. The store which you have created should be available to LoginPage component. Can you paste that code too?

Iosif · Accepted Answer · 2020-10-07 11:28:58Z

try:

import React, { Component} from 'react'; import { connect } from 'react-redux'; export class LoginPage extends Component<any> { render(){ console.log('props doesnt contain - login(): ', this.props) return ( <button onClick={ this.props.login }>Login</button> ) } } const mapProps = state => ({ user: state.user }) const dispatchProps = (dispatch) => ({ login: () => dispatch({ type: 'USER_LOGGED_IN', payload: true}) }) export default connect(mapProps,dispatchProps)(LoginPage)

to return an object with Arrow Functions you need to wrap your {} with ()

Yeah I tried that for piece of mind and didn't change anything.

Collectives™ on Stack Overflow

Redux - Dispatching Action (onClick Event)

3 Answers 3

1 Comment

2 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Related