Reducer can not change return result - reactjs

Question

I have 3 tabs as below:
ALL|Top100|Spam
At first load page, ALL is called and I receive 257 return records, then I click tab "Spam" and I receive 11 return records. All is ok.
But when my current page is "Spam" then I click tab "ALL", I also receive 11 return records. It wrong! The result is must 257 records.
After debug, I found "componentWillReceiveProps" in this case is called one time only, while at first load page it called 2 times. Lead to the state on Reducer is not update.
Please help me.
Thank you all
Here my code:
PostPage
/**
* Created by admin on 7/7/17.
*/
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import * as combineActions from '../../actions/index';
import { bindActionCreators } from 'redux';
import PostFilter from './PostFilter';
import PaginationView from '../common/PaginationView';
import { MODAL_TYPES } from '../../const';
import List from '../common/List';
import { I18n } from 'react-redux-i18n';
import toastr from 'toastr';
import moment from 'moment';
// import { showModal } from '../../actions/modalAction';
import PostForm from './PostForm';
const Translate = require('react-redux-i18n').Translate;
class PostPage extends Component {
constructor(props, context) {
super(props, context);
this.state = {
currentPage: props.paging.currentPage,
displayMode: props.displayMode,
searchKey: '',
fromDate: '',
toDate: '',
flgRng: '',
category: '',
};
}
handleChangeDate = (dateName, dateValue) => {
let fromDate, toDate;
if (dateName === 'fromDate') {
fromDate = dateValue;
this.setState({
fromDate,
})
}else{
toDate = dateValue;
this.setState({
toDate,
})
}
}
handlelChangeFilter = (event) => {
this.setState({
[event.target.name]: event.target.value
});
}
handleSearch = () => {
const { searchKey, category } = this.state;
let { flgRng, fromDate, toDate } = this.state;
const params = {};
if(this.validate(fromDate, toDate) ===false)
{
return;
}
if (category) {
params['category.id'] = category;
}
let fD, tD;
if(fromDate){
fD = this.formatDate(fromDate);
flgRng = "1";
}else{
flgRng = "";
}
if(toDate){
tD = this.formatDate(toDate);
}
this.setState({
flgRng
})
this.props.actions.fetchPosts({ SearchKey: searchKey, FromDate: fD, ToDate: tD, FlgRng: flgRng, Query: JSON.stringify(params), Mode: this.props.displayMode})
}
handleShowFormNew = () => {
this.props.actions.showModal(
MODAL_TYPES.POST_NEW,
Object.assign(
{
title: I18n.t('common.delete_confirm'),
message: <PostForm />,
type: 'delete_confirm',
handleOK: () => {},
},
this.props,
),
);
}
validate = (fromDate, toDate) => {
if(!fromDate && toDate){
toastr.error(I18n.t('post.msg_fdate'));
return false;
}
if(fromDate && (fromDate === null || fromDate === "" || Date.parse(fromDate) === NaN)){
toastr.error(I18n.t('post.msg_format_fdate'));
return false;
}
if(toDate && (toDate === null || toDate === "" || Date.parse(toDate) === NaN)){
toastr.error(I18n.t('post.msg_format_tdate'));
return false;
}
if(fromDate && toDate){
fromDate = new Date(fromDate)
toDate = new Date(toDate)
if(fromDate > toDate){
toastr.error(I18n.t('post.msg_compare_fdtd'));
return false;
}
}
}
formatDate = (date) => {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [month, day, year].join('-');
}
componentWillMount() {
this.props.actions.setCurrentPage(1);
this.props.actions.fetchPosts();
this.props.actions.fetchCategories();
}
deletePost = (item) => {
this.props.actions.showModal(MODAL_TYPES.CONFIRM_MODAL, Object.assign({
title: I18n.t('common.delete_confirm'),
message: (<Translate value="members.delete_confirm_msg" name={item.content} dangerousHTML />),
type: 'delete_confirm',
handleOK: () => {
this.props.actions.deletePost(item._id)
.then(rs => {
this.props.actions.hideModal();
this.props.actions.triggerRefresh();
toastr.success(I18n.t('post.post_deleted_success'));
}).catch(error => {
this.props.actions.hideModal();
toastr.error(error.message || error);
});
}
}, this.props));
}
componentWillReceiveProps(nextProps) {
const triggerRefresh = this.props.triggerRefresh;
let params = {};
if((this.state.displayMode !== nextProps.displayMode)||(this.state.currentPage !== nextProps.paging.currentPage || triggerRefresh !== nextProps.triggerRefresh)){
this.setState({ currentPage: nextProps.paging.currentPage, displayMode: nextProps.displayMode, searchKey: this.state.searchKey, fromDate: this.state.fromDate, toDate: this.state.toDate, flgRng: this.state.flgRng, category: this.state.category});
if(this.state.category){
params['category.id'] = this.state.category;
}
let fromDate, toDate, flgRng;
if(this.validate(this.state.fromDate, this.state.toDate) ===false)
{
return;
}
if(this.state.fromDate){
fromDate = this.state.fromDate.format("MM-DD-YYYY");
flgRng = "1"
}
if(this.state.toDate){
toDate = this.state.toDate.format("MM-DD-YYYY");
}
this.props.actions.fetchPosts({PageNumber: nextProps.paging.currentPage , SearchKey: this.state.searchKey, FromDate: fromDate, ToDate: toDate, FlgRng: flgRng, Query: JSON.stringify(params), Mode: nextProps.displayMode})
}
}
render() {
const {posts, actions, triggerRefresh, categories, displayMode} = this.props;
const {currentPage} = this.state;
let data = []
let listOptions = {}
if(posts.items.length > 0 && posts.items[0].spamRecs && displayMode ==='spam'){
data = posts.items.length > 0 ? posts.items.map(key => {
key.name = key.author? `${key.author.firstName} ${key.author.lastName}`: '';
key.categoryName = key.category ? key.category.name : '';
key.createdDate = moment(key._created).format('MM/DD/YYYY');
key.reportedDate = key.spamRecs ? moment(key.spamRecs['_created']).format('MM/DD/YYYY') : "";
key.numberReport = key.spamRecs ? key.spamRecs.length : 0
return key;
}): []
listOptions = {
headers: [I18n.t('common.title'), I18n.t('post.category'), I18n.t('post.author'), I18n.t('post.created_date_time'), I18n.t('post.number_report'), I18n.t('post.reported_date'), I18n.t('common.action')],
data: {
items: data,
mapping: ['content', 'categoryName','name', 'createdDate', 'numberReport', 'reportedDate', 'action'],
align:["","","","","center","",""],
render: [
{
key: "content",
render: (item) => {
return <div className="overflow" style={{ width: '180px'}}>{item.content}</div>
}
},
{
key: "categoryName",
render: (item) => {
return <div className="overflow" style={{ width: '140px'}}>{item.categoryName}</div>
}
},
{
key: "name",
render: (item) => {
return <div className="overflow" style={{ width: '60px'}}>{item.name}</div>
}
}
],
},
params: {url: '/posts/detail/%s/info' + '/' +this.state.displayMode, deleteAction: this.deletePost},
count: posts.count
};
}else{
data = posts.items.length > 0 ? posts.items.map(key => {
key.name = key.author? `${key.author.firstName} ${key.author.lastName}`: '';
key.numberComment = key.comments ? key.comments.length: 0;
key.numberLike = key.likes ? key.likes.length : 0;
key.categoryName = key.category ? key.category.name : '';
key.createdDate = moment(key._created).format('MM/DD/YYYY');
return key;
}): []
listOptions = {
headers: [I18n.t('common.title'), I18n.t('post.category'), I18n.t('post.author'), I18n.t('post.created_date_time'), I18n.t('post.number_comment'), I18n.t('post.number_view'), I18n.t('post.number_like'), I18n.t('common.action')],
data: {
items: data,
mapping: ['content', 'categoryName','name', 'createdDate', 'numberComment', 'views', 'numberLike', 'action'],
align:["","","","","center","center","center",""],
render: [
{
key: "content",
render: (item) => {
return <div className="overflow" style={{ width: '180px'}}>{item.content}</div>
}
},
{
key: "categoryName",
render: (item) => {
return <div className="overflow" style={{ width: '140px'}}>{item.categoryName}</div>
}
},
{
key: "name",
render: (item) => {
return <div className="overflow" style={{ width: '60px'}}>{item.name}</div>
}
}
],
},
params: {url: '/posts/detail/%s/info' + '/' +this.state.displayMode, deleteAction: this.deletePost},
count: posts.count
};
}
return (
<div className="table-page">
<h4 className="module-title">{I18n.t('post.page.title')}</h4>
<PostFilter
categories={categories}
searchKey={this.state.searchKey}
fromDate={this.state.fromDate}
toDate={this.state.toDate}
onSearch={this.handleSearch}
onShow={this.handleShowFormNew}
onChangeDate = {this.handleChangeDate}
onChangeFilter = {this.handlelChangeFilter}
/>
<List {...listOptions} />
<PaginationView count={posts.count} currentPage={currentPage} onSelectPage={(page) => {actions.setCurrentPage(page)}}/>
</div>
);
}
}
function mapStateToProps(state, ownProps) {
return {
posts: state.posts.page,
categories: state.posts.categories,
paging: state.paging,
i18n: state.i18n,
triggerRefresh: state.posts.triggerRefresh
};
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(combineActions, dispatch)
};
}
export default connect(mapStateToProps, mapDispatchToProps)(PostPage);
postsReducer
/**
* Created by admin on 7/12/17.
*/
import {POSTS} from '../const/actionTypes';
const initialState = {
page: {
items: [],
count: 0
},
detail: {},
post: {
items: [],
count: 0
},
comment: {
items: [],
count: 0
},
triggerRefresh: false,
categories: [],
currentP: {},
pListComment: [],
pList: [],
pListReporter: [],
};
export default function posts(state = initialState, action) {
switch(action.type) {
case POSTS.FETCH_SUCCESS:
return {...state, page: {items: action.payload.items, count: action.payload.count}};
case POSTS.FETCH_CATEGORY_SUCCESS:
return {...state, categories: action.payload};
case POSTS.TRIGGER_REFRESH:
return {...state, triggerRefresh: !state.triggerRefresh}
case POSTS.GET_POST_DETAIL_SUCCESS:
return { ...state, currentP: Object.assign({}, action.payload) };
case POSTS.CREATE_SUCCESS:
return { ...state, pList: [action.payload, ...state.pList], currentP: {} };
case POSTS.UPDATE_SUCCESS:
let updated = action.payload;
let newItems = state.pList.map(p => {
return p._id === updated._id ? Object.assign({}, p, updated) : p;
});
return { ...state, pList: newItems, currentPS: action.payload };
case POSTS.DELETE_POSTS_SUCCESS:
return { ...state, pList: state.pList.filter(item => item._id != action.payload) };
case POSTS.GET_POST_COMMENT_SUCCESS:
return { ...state, pListComment: action.payload };
case POSTS.GET_POST_REPORTER_SUCCESS:
return { ...state, pListReporter: action.payload };
default:
return state;
}
}