I cannot for the life of me figure out what I did wrong. I checked out other peoples post that are similar to mine and cant find whats wrong, can somebody help? I only started react and functional programming yesterday so a lot of this stuff is new to me. As far as I know, something must be wrong with my actions or how I defined my types correct? Here is my code.

index.android.js

function configureStore(initialState) {
    const enhancer = pose(
        applyMiddleware(
            thunkMiddleWare,
            loggerMiddleWare,
        ),
    );
    return createStore(reducer, initialState, enhancer)
}
const store = configureStore({});

const App = () => (
    <Provider store={store}>
        <AppContainer/>
    </Provider>
)

AppRegistry.registerComponent('BHPApp', () => App);

As well as my ponents, reducers, actions and types.

ACTIONS

import * as UserActions from './users'

export const ActionCreators = Object.assign({},
    UserActions
);

export const SET_ALL_USERS = 'SET_ALL_USERS';

import * as types from './types'
import ApiUtils from '../lib/apiUtils'

export function fetchAllUsers() {
    return (dispatch, getState) => {
        return fetch(URL + '/user/getAll')
            .then(ApiUtils.checkStatus)
            .then(response => {
                dispatch(setAllUsers({ hBaseUsers: response }));
            })
            .catch(e => {
                console.log(e)
            })
    }
}

function setAllUsers( {hBaseUsers} ) {
    hBaseUsers.forEach((hBaseUser) => {
        console.log(hBaseUser);
    });
    return {
        types: types.SET_ALL_USERS,
        hBaseUsers,
    }
}

REDUCERS

import { bineReducers } from 'redux'
import * as userReducer from './users'

export default bineReducers(Object.assign(
    userReducer,
));

import createReducer from '../lib/createReducer'
import * as types  from '../actions/types'

export const getUsers = createReducer({}, {
    [types.SET_ALL_USERS](state, action){
        let newState = {};
        action.hBaseUsers.forEach( (hBaseUser) => {
           newState[hBaseUser.personUniqueID] = hBaseUser;
        });
        return newState;
    }
});

export const userCount = createReducer({}, {
    [types.SET_ALL_USERS](state, action){
        action.hBaseUsers.length;
    }
});

CONTAINERS

class AppContainer extends Component{
    render(){
        return <Home {...this.props} />
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(ActionCreators, dispatch);
}

    export default connect((state) =>  { return {} }, mapDispatchToProps)(AppContainer);
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
    ScrollView,
    View,
    TextInput,
    Image,
    TouchableHighlight,
    StyleSheet,
    Text
} from 'react-native'

class Home extends Component{
    searchPressed(){
        this.props.fetchAllUsers();
    }

    hBaseUsers(){
        return Object.keys(this.props.getUsers).map( key =>  this.props.getUsers[key])
    }

    render(){
        console.log(this.hBaseUsers());
        return<View>
            <View>
                <TouchableHighlight onPress={() => this.searchPressed() } >
                    <Text>Fetch Users</Text>
                </TouchableHighlight>
            </View>
            <ScrollView>
                {this.hBaseUsers().map((hBaseUser) => {
                    return <View>
                        <Text>
                            hBaseUser.personUniqueID
                        </Text>
                    </View>
                })}
            </ScrollView>
        </View>
    }
}

function mapStateToProps(state) {
    return{
        getUsers: state.getUsers
    }
}

export default connect(mapStateToProps)(Home);

After everything I read, my issue can be in any of these things but I cant seem to find it. As far as i know, I spelled and defined everything correctly. Can somebody please help me?

I cannot for the life of me figure out what I did wrong. I checked out other peoples post that are similar to mine and cant find whats wrong, can somebody help? I only started react and functional programming yesterday so a lot of this stuff is new to me. As far as I know, something must be wrong with my actions or how I defined my types correct? Here is my code.

index.android.js

function configureStore(initialState) {
    const enhancer = pose(
        applyMiddleware(
            thunkMiddleWare,
            loggerMiddleWare,
        ),
    );
    return createStore(reducer, initialState, enhancer)
}
const store = configureStore({});

const App = () => (
    <Provider store={store}>
        <AppContainer/>
    </Provider>
)

AppRegistry.registerComponent('BHPApp', () => App);

As well as my ponents, reducers, actions and types.

ACTIONS

import * as UserActions from './users'

export const ActionCreators = Object.assign({},
    UserActions
);

export const SET_ALL_USERS = 'SET_ALL_USERS';

import * as types from './types'
import ApiUtils from '../lib/apiUtils'

export function fetchAllUsers() {
    return (dispatch, getState) => {
        return fetch(URL + '/user/getAll')
            .then(ApiUtils.checkStatus)
            .then(response => {
                dispatch(setAllUsers({ hBaseUsers: response }));
            })
            .catch(e => {
                console.log(e)
            })
    }
}

function setAllUsers( {hBaseUsers} ) {
    hBaseUsers.forEach((hBaseUser) => {
        console.log(hBaseUser);
    });
    return {
        types: types.SET_ALL_USERS,
        hBaseUsers,
    }
}

REDUCERS

import { bineReducers } from 'redux'
import * as userReducer from './users'

export default bineReducers(Object.assign(
    userReducer,
));

import createReducer from '../lib/createReducer'
import * as types  from '../actions/types'

export const getUsers = createReducer({}, {
    [types.SET_ALL_USERS](state, action){
        let newState = {};
        action.hBaseUsers.forEach( (hBaseUser) => {
           newState[hBaseUser.personUniqueID] = hBaseUser;
        });
        return newState;
    }
});

export const userCount = createReducer({}, {
    [types.SET_ALL_USERS](state, action){
        action.hBaseUsers.length;
    }
});

CONTAINERS

class AppContainer extends Component{
    render(){
        return <Home {...this.props} />
    }
}

function mapDispatchToProps(dispatch) {
    return bindActionCreators(ActionCreators, dispatch);
}

    export default connect((state) =>  { return {} }, mapDispatchToProps)(AppContainer);
import React, { Component } from 'react'
import { connect } from 'react-redux'
import {
    ScrollView,
    View,
    TextInput,
    Image,
    TouchableHighlight,
    StyleSheet,
    Text
} from 'react-native'

class Home extends Component{
    searchPressed(){
        this.props.fetchAllUsers();
    }

    hBaseUsers(){
        return Object.keys(this.props.getUsers).map( key =>  this.props.getUsers[key])
    }

    render(){
        console.log(this.hBaseUsers());
        return<View>
            <View>
                <TouchableHighlight onPress={() => this.searchPressed() } >
                    <Text>Fetch Users</Text>
                </TouchableHighlight>
            </View>
            <ScrollView>
                {this.hBaseUsers().map((hBaseUser) => {
                    return <View>
                        <Text>
                            hBaseUser.personUniqueID
                        </Text>
                    </View>
                })}
            </ScrollView>
        </View>
    }
}

function mapStateToProps(state) {
    return{
        getUsers: state.getUsers
    }
}

export default connect(mapStateToProps)(Home);

After everything I read, my issue can be in any of these things but I cant seem to find it. As far as i know, I spelled and defined everything correctly. Can somebody please help me?

• javascript
• android
• react-native
• react-redux

Share Improve this question Follow asked May 30, 2017 at 22:51 anonuser1234anonuser1234 53322 gold badges1212 silver badges2626 bronze badges 3

• Does replacing everywhere types.SET_ALL_USERS with 'SET_ALL_USERS' get it to work? If so the you might be importing/exporting the string constants incorrectly. – Matt Aft Commented May 31, 2017 at 0:01
• 1 your setAllUsers returns an action object with a spelling error. it should be type: types.SET_ALL_USERS not types – azium Commented May 31, 2017 at 1:04
• @azium yep that was it. Cant believe I let a typo like that go over my head. Sigh... – anonuser1234 Commented May 31, 2017 at 14:37

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

Your setAllUsers action is returning an object with the wrong set of properties:

function setAllUsers( {hBaseUsers} ) {

return {
    types: types.SET_ALL_USERS,
    hBaseUsers,
}

}

In your return statement, change "types" to "type" to fix this error.

I had the same error. In my case I missed the parameter "mapDispatchToProps" in connect function which is used to map the dispatch to props.