React - Store updated but didnt re-render the Component - reactjs

Question

The scenario is :
1.press a button(Class A-Component) to add a item to a list (Class B-Component) then re-render the Table.
I have checked the list in the store by store.getState() And i have updated the list in the store perfectly after pressing button.
But it didnt re render the Table which showing the list.
Anyone can help ?
initialState3
var initialState3 = {
products1: [
{
id: "123",
abbreviation: "123",
case_no: "123",
created_dt: "31/01/2018",
last_updated: "11:43:45"
}
]
};
reducers
function ReducersForSeach(state = initialState3, action) {
switch (action.type) {
case "CLICK_SEARCH": {
products1.push({
id: "456",
abbreviation: "456",
case_no: "456",
created_dt: "31/01/2018",
last_updated: "11:43:45"
});
return {
...state,
products1
};
}
}
}
Component
var Table = React.createClass({
render() {
const { products1 } = this.props;
const tableHeaderColumns = columnData.map(column => (
<TableHeaderColumn dataField={column.action} isKey={column.isKey} dataSort={column.dataSort}>
{column.description}
</TableHeaderColumn>
));
return (
<BootstrapTable height="600" style={{ overflowY: "scroll" }} data={products1} options={options}>
{tableHeaderColumns}
</BootstrapTable>
);
}
});
Connection
function mapStateToPropsFortable(state) {
return {
products1: state.reducreForSeach.products1
};
}
const Table1 = connect(
mapStateToPropsFortable,
null
)(Table);
ReactDOM.render(
<Provider store={store}>
<Table1 />
</Provider>,
document.getElementById("divReqListTable")
);
Store
var rootReducer = Redux.combineReducers({
reducreForAge,
reducreForButtonGroup2,
reducreForSeach
});
var store = Redux.createStore(rootReducer);

Answer 1

Chang your reducer to this
function ReducersForSeach(state = initialState3, action) {
switch (action.type) {
case "CLICK_SEARCH": {
const products1 = {
id: "456",
abbreviation: "456",
case_no: "456",
created_dt: "31/01/2018",
last_updated: "11:43:45"
};
return {
...state,
products1: state.products1.concat(products1)
};
}
default:
return state;
}
}
You click try it in https://codesandbox.io/embed/74108xyln0

Answer 2

This is the problem area.
return {
...state,
products1
};
Change this line function ReducersForSeach(state = initialState3, action) { to
function ReducersForSeach(state = initialState3.products1, action) {

Answer 3

Try this::
products1 = {
id: "456",
abbreviation: "456",
case_no: "456",
created_dt: "31/01/2018",
last_updated: "11:43:45"
});
return {
...state,
products1: [...state.products1, products1]
};
Normally you would put the payload in there and send through that object when you are dispatching the action.
Like this::
return {
...state,
products: [...state.products, action.payload]
};
This is assuming that products is an array and you want to .push() a new item into that array.
I hope this helps. :)
UPDATE::
Here is a full example of the reducer that i use for products, that adds a new one in every time it's called.
I do send the object through in the action.
Reducer:
import {
PRODUCTS,
} from '../constants/ActionTypes';
let products = []
if (localStorage.getItem('products') != undefined) {
products = JSON.parse(localStorage.getItem('products'))
}
const initialState = {
products: products
};
export default function (state = initialState, action) {
switch (action.type) {
case PRODUCTS:
localStorage.setItem('products', JSON.stringify([...state.items, action.payload]))
return {
...state,
products: [...state.items, action.payload]
}
break;
default:
// console.log('Products reducer called: default');
// console.log(action.type);
break;
}
return state
}
action::
export const addProduct = (obj) => {
return {
type: PRODUCTS,
payload: obj
};
};
This is the action call in the index.js file.
this.props.dispatch(addProduct(newItemObj));
I hope this makes sense.