this.props.dispatch is not a function.

[PManager1]

I was tryign to use this in the component but i got this error message, how do i fix it ?

I think th eissue is with the store coz Im using the redux-thunk, How can i fix it ?

Heres mycode :

import { createStore, compose, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import reducers from '../reducers';

const store = createStore( reducers, {}, compose ( applyMiddleware(thunk) ) ); export default store;

//And my reducer code, is.

import { combineReducers } from 'redux'; import auth from './auth_reducer'; import jobs from './jobs_reducer';

// New import LibraryReducer from './comps/LibraryReducer' import SelectionReducer from './comps/SelectionReducer' import { toastReducer as toast } from 'react-native-redux-toast';

export default combineReducers({ auth: auth, jobs: jobs, form: form, libraries: LibraryReducer, selectedLibraryId: SelectionReducer,

toast, });

//

[fahrurben]

` import { createStore, applyMiddleware } from 'redux'; import thunk from 'redux-thunk'; import rootReducer from './rootReducer';

export default function configureStore(initialState) { return createStore( rootReducer, initialState, applyMiddleware(thunk) ); } `

This is the format of createStore i create, i believe it's no need to put the component (toast) into createStore

[PManager1]

@fahrurben hows your code different than what i have above ?

Also the issue that i m facing is due to this,,

I am stuck here, coz I want to use this toaster library via redux

but when i do that I get the error message : this.props.dispatch is not a function. bla bla dispatch undefined.

New code after usual componentwillmount() and navigation bla bla bla,

Now this works fine

But if i do need the actions too. the moment i add the following lines,

It complains and you know why that complains,

How to “ use the shortcut by passing an object directly to 'connect’. “ ?

[PManager1]

@fahrurben if i do as you suggested, i get the following error. Moreover i read a number of places that all the reducer related code shoudl be inside the redudcers and not in the store. Any other suggestions after looking into my code ?

My major concern is i cant call the Actions from with in the class componet.

[fahrurben]

From the first i look, the problem are with reducers. Do you have combine the reducers with 'toast' Reducer ? You can't put the two reducer in Create store, instead combine the reducer first.

[fahrurben]

It will need to check reducer, action, container, component to know the problem

[PManager1]

@fahrurben your right about : "From the first i look, the problem are with reducers. Do you have combine the reducers with 'toast' Reducer ? You can't put the two reducer in Create store, instead combine the reducer first."

Ive provided you both the reduccer, action, component above.

[fahrurben]

Actually i don't see any action to map to the container. export default connect()(FollowupScreen); will enough, if not i will need to see what 'actions' you put to component.

[PManager1]

Lol - yes it works fine if I don’t have any actions but the moment I try to use the actions it throws the errors.

Sent from my iPhone

On Sep 29, 2017, at 12:42 AM, Farhrurrazi [email protected] wrote:

Actually i don't see any action to map to the container. export default connect()(FollowupScreen); will enough, if not i will need to see what 'actions' you put to component.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[fahrurben]

So, maybe this is maybe help you.

function mapDispatchToProps(dispatch) { return { dispatch, onClick: () => dispatch(increment()) }; }

Do you put the dispatch in returned object ? If not, maybe you can try it. I think this caused your issue.

https://stackoverflow.com/questions/34458261/how-to-get-simple-dispatch-from-this-props-using-connect-w-redux

[PManager1]

I want to use redux, ive been using the state in every component.

[PManager1]

function mapDispatchToProps(dispatch) { return { dispatch, onClick: () => dispatch(increment()) }; }

where is increment() coming from ?

[PManager1]

and how do i wtite the last statement i.e export class ?

[fahrurben]

Change onclick with your action/function to map, if none so no need to define this

export default connect(
  null,
  mapDispatchToProps,
)(FollowupScreen));

[PManager1]

this is what ive got , function mapDispatchToProps(dispatch) { return { dispatch, actions }; } export default connect( null, mapDispatchToProps )(FollowupScreen);

But it still cant access the Prioritiesfetch() in the componentWillMount

import * as actions from '../actions'; import { prioritiesFetch } from '../actions';

componentWillMount(){ this.props.prioritiesFetch(); }

[PManager1]

it should be componentWillMount(){ this.props.actions.prioritiesFetch(); }

[fahrurben]

In container `import { prioritiesFetch } from '../actions';

const mapDispatchToProps = (dispatch) => { return { dispatch, prioritiesFetch: () => dispatch(prioritiesFetch()) } }; `

In your component `class FollowupScreen extends React.Component {

constructor(props) { super(props);

this.prioritiesFetch = props.prioritiesFetch;

}

componentWillMount(){ this.props.prioritiesFetch(); } }`

[PManager1]

this is great,

constructor(props) { super(props);

this.prioritiesFetch = props.prioritiesFetch; }

But how woudl you suggest to implment in the case where we want to import all the actions with one go ?

ie import * as actions from '..actions';

[PManager1]

@fahrurben so it worked for when i had only one action, I get error when i have more than 1 actions and ive to use the mapStateToProps, Here is my code, can you please explain what am I doing wrong const mapStateToProps = (state) => { console.log('203- UserProfileScreen - mapStateTo Props STATE=', state); console.log('204- UserProfileScreen - mapStateTo Props NEW-2 UserInfoForm ', state.UserInfoForm); const { _id, userId, user_state, email, phone_no, subscription_expire, gmailPassword, gmailId, subscription, signature_link } = state.UserInfoForm; return { _id, userId, user_state, email, phone_no, subscription_expire, gmailPassword, gmailId, subscription, signature_link }; // return { userinfo: null } };

const mapDispatchToProps = (dispatch) => { return { dispatch, userInfoFetch: () => dispatch(userInfoFetch()); userInfoSave: () => dispatch(userInfoSave()); userInfoUpdate: () => dispatch(userInfoUpdate()); } };

export default connect(mapStateToProps, mapDispatchToProps)(MyProfileScreen);

const mapStateToProps = (state) => { console.log('203- UserProfileScreen - mapStateTo Props STATE=', state); console.log('204- UserProfileScreen - mapStateTo Props NEW-2 UserInfoForm ', state.UserInfoForm); const { _id, userId, user_state, email, phone_no, subscription_expire, gmailPassword, gmailId, subscription, signature_link } = state.UserInfoForm; return { _id, userId, user_state, email, phone_no, subscription_expire, gmailPassword, gmailId, subscription, signature_link }; // return { userinfo: null } };

const mapDispatchToProps = (dispatch) => { return { dispatch, // userInfoFetch, // userInfoSave, // userInfoUpdate userInfoFetch: () => dispatch(userInfoFetch()); userInfoSave: () => dispatch(userInfoSave()); userInfoUpdate: () => dispatch(userInfoUpdate()); } };

export default connect(mapStateToProps, mapDispatchToProps)(MyProfileScreen);

[sbalay]

@jpca999 Can you upload an example project with your code to github? I'll probably will be more helpful taking a closer look the entire code

[PManager1]

@sbalay hmm

[fahrurben]

If action need parameter, it must provide in mapDispatchToProps ` import { prioritiesFetch,userInfoSave } from '../actions';

const mapDispatchToProps = (dispatch) => { return { dispatch, prioritiesFetch: () => dispatch(prioritiesFetch()), userInfoSave: (customer) => dispatch(userInfoSave(customer)); } };`