Redux Dataflow from Reducer to Container - redux

Question

As i am newly to redux, here is a critical question about dataflow in redux
As i understand, i have created a component as CountN:
import React from 'react'
import styles from '../../features/counter/Counter.module.css'
const CountN = (props) => {
const {countValue,actions} = props;
return (
<div>
<div className={styles.row}>
<button
className={styles.button}
aria-label="Increment value"
onClick={actions.increment}
>
+
</button>
<span className={styles.value}>{ countValue }</span>
<button
className={styles.button}
aria-label="Decrement value"
onClick={actions.decrement}
>
-
</button>
</div>
</div>
)
}
export default CountN
Then i use container to pass data to CountN
Container below:
import React from 'react';
import CountN from "../../components/countN"
import { connect } from 'react-redux'
import * as CountActions from '../../actions'
import { bindActionCreators } from 'redux';
const mapStateToProps = (state) =>({
countValue: state.value
})
const mapDispatchToProps = (dispatch) =>({
actions: bindActionCreators(CountActions,dispatch)
})
export default connect(
mapStateToProps,
mapDispatchToProps
)(CountN)
And in order to manage states, i create the Reducer to set States:
Reducer below:
import * as types from '../constants/CountTypes';
const initialState = [{
value: 0,
payload: 0,
}]
const counter = (state=initialState,action)=> {
switch (action.type){
case types.Increment:
return [{
value: state.value + 1,
payload: 0,
}]
case types.Decrement:
return [
...state,
{
value: state.value - 1
}
]
case types.IncrementByAmount:
return [{
value: state.value + action.payload ,
payload: action.payload
}
]
default:
return state
}
};
export default counter;
Plus, i create a store with "CreateStore(reducer)" to store data,
Now the problem is that i get an error:
TypeError: Cannot read property 'increment' of undefined
Which i understand that the state is not defined,
Could some expert help me to figure out which part is wrong, why the data haven't been passed to Container via "props"???
Many thanks

Answer 1

The code you have should work but I did make some changes to the state, you defined it as an array but I don't see a reason why so I changed it to an object. Your mapStateToProps doesn't consider the state to be an array so that may have been a mistake. See comments in code below where I made changes.
const { Provider, connect } = ReactRedux;
const {
createStore,
applyMiddleware,
compose,
bindActionCreators,
} = Redux;
//I changed initialState to an object instead of an array
const initialState = {
value: 0,
payload: 0,
};
//action types
const types = {
Increment: 'Increment',
Decrement: 'Decrement',
IncrementByAmount: 'IncrementByAmount',
};
//action creators
const CountActions = {
increment: () => ({ type: types.Increment }),
decrement: () => ({ type: types.Decrement }),
};
const reducer = (state = initialState, action) => {
switch (action.type) {
case types.Increment:
//changed to object
return {
value: state.value + 1,
payload: 0,
};
case types.Decrement:
//changed to object
return {
...state,
value: state.value - 1,
};
case types.IncrementByAmount:
//changed to object
return {
value: state.value + action.payload,
payload: action.payload,
};
default:
return state;
}
};
//creating store with redux dev tools
const composeEnhancers =
window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(
reducer,
initialState,
composeEnhancers(
applyMiddleware(() => (next) => (action) =>
next(action)
)
)
);
const CountN = (props) => {
const { countValue, actions } = props;
return (
<div>
<div>
<button
aria-label="Increment value"
onClick={actions.increment}
>
+
</button>
<span>{countValue}</span>
<button
aria-label="Decrement value"
onClick={actions.decrement}
>
-
</button>
</div>
</div>
);
};
const mapStateToProps = (state) => ({
countValue: state.value,
});
const mapDispatchToProps = (dispatch) => ({
actions: bindActionCreators(CountActions, dispatch),
});
const App = connect(
mapStateToProps,
mapDispatchToProps
)(CountN);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.2.0/react-redux.min.js"></script>
<div id="root"></div>