React Redux Data not being passed to props

Question

I am new to React/Redux and I am stuck in a problem. My fetched data from API is not being passed to props. It's always an empty object. I see that there might be some issues that I am not even aware of but I don't have a clue where to look for.

Please check my codes below:

RegisterPage.jsx

import { connect } from 'react-redux';
import { userActions } from '../_actions';

class RegisterPage extends React.Component {
constructor(props) {
    super(props);

    this.state = {
        user: {
            first_name: '',
            last_name: '',
            properties_id: '',
            email: '',
            phone_number: '',
            password: ''
        },
        submitted: false,
        checked: false,
    };

    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
}

componentDidMount() {
    this.props.dispatch(userActions.getAll());
}

handleChange(event) {
    const { name, value } = event.target;
    const { user } = this.state;
    this.setState({
        user: {
            ...user,
            [name]: value
        },
        checked: !this.state.checked
    });
}

handleSubmit(event) {
    event.preventDefault();

    this.setState({ submitted: true });
    const { user } = this.state;
    const { dispatch } = this.props;

    if(this.state.checked) {
        if (user.first_name && user.last_name && user.properties_id && 
            user.email && user.phone_number && user.password) {
            dispatch(userActions.register(user));
        }
    } else {
        alert("Please tick the checkbox to agree to Terms and Conditions");
    }
}

render() {
    const { registering, properties } = this.props;
    const { user, submitted } = this.state;
    return (......) 

}

function mapStateToProps(state) {
  const { registering } = state.registration;
  const { properties } = state;
  return {
    properties,
    registering
  };
}

const connectedRegisterPage = connect(mapStateToProps)(RegisterPage);
export { connectedRegisterPage as RegisterPage };

users.reducers.js

 export function users(state = {}, action) {
  switch (action.type) {
  case userConstants.GETALL_REQUEST:
    return {
      loading: true
    };
  case userConstants.GETALL_SUCCESS:
    return {
      items: action.properties
      //action.users
    };
  case userConstants.GETALL_FAILURE:
    return { 
      error: action.error
    };
  default:
    return state
  }
}

user.actions.js

        export const userActions = {
            login,
            logout,
            register,
            getAll,
            delete: _delete
        };

           function getAll() {
            return dispatch => {
                dispatch(request());

                userService.getAll()
                    .then(
                        properties => dispatch(success(properties)),
                        error => dispatch(failure(error.toString()))
                    );
            };

            function request() { return { type: userConstants.GETALL_REQUEST } }
            function success(properties) { return { type: userConstants.GETALL_SUCCESS, properties } }
            function failure(error) { return { type: userConstants.GETALL_FAILURE, error } }
        }

user.service.js

        // Get All Properties
        function getAll() {
            const requestOptions = {
                method: 'GET'
            };

            return fetch(`${config.apiUrl}/api/properties`, requestOptions).then(handleResponse).then(
                properties => {
                    return properties;
                }
            );
        }

Here's the screenshot of the console:

It is clear that properties array is not empty. But when I am going to use properties, it is empty. I don't know what's wrong. If anyone could help figure out what's wrong with my code or something that I missed, your help will be greatly appreciated. I just need to fix this so I could move forward. Thanks in advance!

Answer 1

I thinking that your state tree might not contain state.properties but instead state.items . Unless if you did something in combineReducers() that changes the shape of it again.

  case userConstants.GETALL_SUCCESS:
    return {
      items: action.properties
      //action.users
    };

This part would probably cause action.properties to be stored in state.items instead of state.properties

I'd recommend using ReduxDevTools to make your life with state easier