The scenario is : 1.press a button(Class A-Component) to add a item to a list (Class B-Component).
The initialState for the list and the console.log('search action found') in reducers works perfectly.
But its failed to add one more item in the list.
I have checked the store after i called the "CLICK_SEARCH" action . The number of item in the List (products1) remaining 1 item only(initialState that one). 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': {
console.log("search action found");
return {
...state,
products1: [...state.products1,
{
id: "456",
abbreviation: "456",
case_no: "456",
created_dt: "31/01/2018",
last_updated: "11:43:45"
}
]
}
}
default :{
return state
}
}
}
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)