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 = compose(
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 components, 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 { combineReducers } from 'redux'
import * as userReducer from './users'
export default combineReducers(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?