Reducer or Action not working - reactjs

Question

I'm having a problem here, I have been doing redux for about 2 weeks now.
I'm trying to create a loader so I am trying to get the isFetching state. Using thunk, i'm doing an ajax fetch, and dispatching the loading state.
The dispatch was called, because I can see in my console.
before component will mount, its suppose to call FETCH_PROFILE, and isFetching set to true, but when i console.log(this.props.profile.isFetching), it's returning false.
Same for FETCH_PROFILE_SUCCESS, it doesn't update this.props.profile. (Or because It's not rerendering...so I can't see it)
I've been working on this simple thing for hours and I have no idea why it doesn't update...... I am sure I made some mistake somewhere but no idea what.
export const FETCH_PROFILE = 'FETCH_PROFILE';
export const FETCH_PROFILE_SUCCESS = 'FETCH_PROFILE_SUCCESS';
export const FETCH_PROFILE_FAIL = 'FETCH_PROFILE_FAIL';
export function getUserProfile() {
return (dispatch) => {
dispatch(getUserProfileStart());
const config2 = {
method: 'GET',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
credentials: 'include',
body: ``,
};
fetch('http://api.example.com/profile/',config2)
.then((resp) => resp.json())
.then(function(data) {
dispatch(getUserProfileSuccess(data));
return 0;
}).catch(function(error){
return dispatch({type: FETCH_PROFILE_FAIL});
})
}
}
function getUserProfileSuccess(data) {
return {
type: FETCH_PROFILE_SUCCESS,
isFetching: false,
payload: data
}
}
function getUserProfileStart() {
return {
type: FETCH_PROFILE,
isFetching: true
}
}
my reducer
import {
FETCH_PROFILE,
FETCH_PROFILE_SUCCESS,
FETCH_PROFILE_FAIL
} from '../actions/profile';
export default function userProfile(state={isFetching: false}, action) {
switch(action.type) {
case FETCH_PROFILE:
return {...state, isFetching: true}
case FETCH_PROFILE_SUCCESS:
return {...state, isFetching: false, data: action.payload}
case FETCH_PROFILE_FAIL:
return { ...state, isFetching: false };
default:
return state
}
}
My Component.
import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import {connect } from 'react-redux';
import * as profileActions from '../../actions/profile';
import {bindActionCreators} from 'redux';
class ProfilePage extends React.Component {
constructor(props) {
super(props);
this.getUserProfile = this.getUserProfile.bind(this);
}
componentWillMount() {
this.props.actions.getUserProfile();
}
render() {
console.log('Checking isFetching State', this.props.profile.isFetching);
return (
<div>
some text here.
</div>
);
}
}
function mapStateToProps(state) {
console.log('Mapping Stat', state.profile);
return {
profile: state.userProfile
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(profileActions, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(withStyles(s)(ProfilePage));
my combine reducers...
import userProfile from './profile';
//some other imports...
export default combineReducers({
userProfile,
//other reducers that works...
});

Answer 1

Try this:
At index while creating store
export const store = createStore(
combineReducer,
applyMiddleware(thunk) // choose you middleware....
//initial state as per need
);
At reducer:
import {
FETCH_PROFILE,
FETCH_PROFILE_SUCCESS,
FETCH_PROFILE_FAIL
} from '../actions/profile';
export default function userProfile(state= {
initialized: true,
init:false,
success:false,
fail:false,
}, action) {
switch(action.type) {
case FETCH_PROFILE:{
const message = action.message;
return Object.assign({}, state, {
init:true,
success:false,
fail:false,
data:message,
})
}
}
case FETCH_PROFILE_SUCCESS:{
const data = action.data;
return Object.assign({}, state, {
init:false,
success:true,
fail:false,
data:data,
})
}
case FETCH_PROFILE_FAIL:{
const err = action.err;
return Object.assign({}, state, {
init:false,
success:false,
fail:true,
data:err,
})
}
default:
return state
}
}
At Component:
import React from 'react';
//use can use this if required.
//import withStyles from 'isomorphic-style-loader/lib/withStyles';
import {connect } from 'react-redux';
import { profileActions} from '../../actions/profile';
//import {bindActionCreators} from 'redux';
class ProfilePage extends React.Component {
constructor(props) {
super(props);
this.state{
success:false;
}
}
componentWillMount() {
this.props.getUserProfile();
}
componentWillReciveProps(nextprop){
if(nextprop.success===true){
this.setState({success==true});
}
}
render() {
return (
{(this.state.success)?<div>this.props.profile.data.yourdata</div>:<div>Loading....</div>}
);
}
}
function mapStateToProps(state) {
return {
profile: state.userProfile
};
}
export default connect(mapStateToProps,{profileActions
})(ProfilePage);
At action:
export const FETCH_PROFILE = 'FETCH_PROFILE';
export const FETCH_PROFILE_SUCCESS = 'FETCH_PROFILE_SUCCESS';
export const FETCH_PROFILE_FAIL = 'FETCH_PROFILE_FAIL';
export function getUserProfile() {
return (dispatch) => {
dispatch(getUserProfileStart(const message:"fetch start"));
const config2 = {
method: 'GET',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
credentials: 'include',
body: ``,
};
fetch('http://api.example.com/profile/',config2)
.then((resp) => resp.json())
.then(function(data) {
dispatch(getUserProfileSuccess(data));
return 0;
}).catch(function(error){
return dispatch(getUserProfileError(error));
})
}
}
function getUserProfileSuccess(data) {
return {
type: FETCH_PROFILE_SUCCESS,
data
}
}
function getUserProfileStart(message) {
return {
type: FETCH_PROFILE,
message
}
}
function getUserProfileError(err) {
return {
type: FETCH_PROFILE,
err
}
}