I create the component, connect it to redux, initialized the state and created reducer.
Component:
import fetchReducer from './reducers/fetchReducer';
import initialState from './constants/initialState';
const store = createStore(fetchReducer, initialState, devToolsEnhancer());
class Table extends React.Component {
// constructor
getDataFromState = function () {
let propsContent = this.props;
let itemsStored = propsContent.itemsProp;
return itemsStored;
};
getOperationItems = function () {
let itemsStored = this.getDataFromState();
itemsStored.map((item, index) => (
<li> key={index} item={item}</li>
))};
render() {
return (
<div className={styles}>
{this.getOperationItems()}
</div>
);
}
}
const mapStateToProps = (store) => {
return {itemsProp: store.items}
};
export default connect(mapStateToProps)(Table)
ReactDOM.render(
<Provider store={store}>
<Table/>,
</Provider>,
document.getElementById("app")
);
Initial state:
export default {
items: [
{
'Date': 1,
'Operation': 1
}
]
}
Reducer:
import initialState from '../constants/initialState';
export default function update(state = initialState) {
return state;
}
But I cant get the initial data from store. Debugging, I see in method Table#getDataFromState that propsContent contains the empty ({}) array - not the expected [{'Date': 1,'Operation': 1 }].
Debugging also I see, that reducer receive the initial state with properly data: [{'Date': 1,'Operation': 1}]
getOperationItemsfunction doesn't return anything, you need toreturn itemsStored.map(...)