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 ***@***.***> 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));
}
};`