TypeError: _this.props.userCreate is not a function

JavaScript
1

hi, i’am trying to implement a crud application using react redux saga.
I have 2 errors: first when adding a user : this.props.userCreate is not a function
and the second when displaying users list: Unhandled Rejection (TypeError): Cannot read property ‘length’ of undefined

My code is like that:

  • actions:
const actions = {
  USER_CREATE: 'USER_CREATE',
  USER_CREATE_SUCCESS: 'USER_CREATE_SUCCESS',
  USER_CREATE_FAILURE: 'USER_CREATE_FAILURE',
	GET_USERS:'GET_USERS',
	GET_USERS_SUCCFESS:'GET_USERS_SUCCFESS',
	GET_USERS_FAILURE:'GET_USERS_FAILURE',
  userCreate: user => ({ //userCreate
    type: actions.USER_CREATE,
    payload: user
  }),
	 userCreateSuccess: (user) => ({
    type: actions.USER_CREATE_SUCCESS,
    user
  }),
  userCreateError: () => ({
    type: actions.USER_CREATE_FAILURE
  }),
	getUsers:()=>(
		{
			type:actions.GET_USERS,
		}),

	getUsersSuccess:(users)=>({
		type:actions.GET_USERS_SUCCFESS,
		users
	}),
	getUsersError:(error)=>({
		type:actions.GET_USERS_FAILURE,
		payload:error
	})


};
export default actions;
  • UserReducer:
import actions from '../actions';


const UserReducer = (state = [], action) => {
	switch (action.type) {
		case actions.USER_CREATE_SUCCESS:
		   return state.concat([action.payload]);
		case actions.USER_CREATE_FAILURE:
			return { ...state, error: true };
		case actions.GET_USERS_SUCCFESS:
		  return state.merge({list: action.users});
		case actions.GET_USERS_FAILURE:
			return { ...state, users: [] };
		default:
			return state;
	}
};

export default UserReducer;
 * AddUser.js:
import React, { Component } from 'react';
import { Input } from 'antd';
import Form from '../uielements/form';
import Button from '../uielements/button';
import actions from '../../redux/users/actions';
const { userCreate } = actions;

const FormItem = Form.Item;
 class AddUser extends Component {
	handleSubmit = e => {
    e.preventDefault();
    console.log(this.state.email.trim());
    console.log(this.state.password.trim());
    if ( this.state.email.trim() && this.state.password.trim()) {
          console.log(this.state);
        //  this.props.onAddUser(this.state);
          this.props.userCreate(this.state);
          console.log(this.props);
          this.setState = {
      			email:'',
      			password:''
      	                 	}
        };
        };

   handleChange = e => {
       this.setState({
    [e.target.name]: e.target.value
             });
            };


  render() {
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 14 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 14,
          offset: 6,
        },
      },
    };
    return (
      <Form onSubmit={this.handleSubmit}>
        <FormItem {...formItemLayout} label="E-mail" hasFeedback >
          {getFieldDecorator('email', {
            rules: [
              {
                type: 'email',
                message: 'The input is not valid E-mail!',
              },
              {
                required: true,
                message: 'Please input your E-mail!',
              },
            ],
          })(<Input name="email" id="email" onChange={this.handleChange}/>)}
        </FormItem>
        <FormItem {...formItemLayout} label="Password" hasFeedback >
          {getFieldDecorator('password', {
            rules: [
              {
                required: true,
                message: 'Please input your password!',
              },

            ],
          })(<Input name="password" id="password" type="text" onChange={this.handleChange}/>)}
        </FormItem>
        <FormItem {...tailFormItemLayout}>
          <Button type="primary" htmlType="submit">
            submit
          </Button>
        </FormItem>
      </Form>
    );
  }
}

const WrappedAddUser = Form.create()(AddUser);
export default WrappedAddUser;
  • AddUserPage.js:
import { connect } from 'react-redux';
//import {userCreate} from '../../../redux/users/actions';
import actions from '../../../redux/users/actions';
import WrappedAddUser from './AddUser';



function mapDispatchToProps(dispatch) {
  return { userCreate: (user) => {dispatch(actions.USER_CREATE)} }
  //return { userCreate: (user) => {dispatch(actions.userCreate(user))} }

}

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

* UsersLIst.js:
import React from 'react';
import { connect } from 'react-redux';
import User from './User';
//import { deleteAgent } from '../actions';

function UsersList({ users}) {
  if(!users.length) {
    return (
      <div>
        No users saved
      </div>
    )
  }
  return (
    <div>
      {users.map(user => {
        return (
          <User user={ user } key={ user.email} />
        );
      })}
    </div>
  );
}

const mapStateToProps = state => {
  return {
    users: state.users
  };
};
export default connect(
  mapStateToProps,
  //mapDispatchToProps
)(UsersList);
 * User.js:
import React from 'react';
export default ({ user: { email,password }}) => {
  return (
    <div style={ styles }>
      <h2>{ email}</h2>
      <p>{ password }</p>
        
    </div>
  );
};

Please, these errors blocked me since many days and i have to achieve my application as soon as possible. Thanks for your help

2

I’ve edited your post for readability. When you enter a code block into the forum, precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

3

i resolved problem related to length.
i updated function UsersList ({users}) to function UsersList (users).
but the problem persists in calling an action in submit function
This.props.userCreate is not a function.
Any ideas please.