adding an object to an array with redux - reactjs

Question

I'm having a problem with redux.
when I use
store.dispatch( addExpense( {description: "Rent"} ) );
in my app.js file it works and the object is added. But when I try to use it in a context of an component in a separated file it doesn't. The console does't throw any error.
When I use other action like "search" in the same component it works fine. So there's no problem with the connection. It seems that for some reasons it can't change the state.
//ACTIONS
export const addExpense = ( { description="", amount=0 } = {}) => ({
type: "ADD_EXPENSE",
expense: {
description,
amount
}
})
//REDUCERS
const expenseReducer = ( state = [], action) => {
switch(action.type) {
case "ADD_EXPENSE":
return [...state, action.expense]
case "EDIT_EXPENSE": //<- this works
return state.map( (expense) => {
if (expense.id === action.id)
return {
...expense, ...action.update }
else return expense
} )
default: return state
}
const filterReducer = ( state = {text:""}, action) => {
switch(action.type){
case "FIND_TEXT": //<- this works
return { ...state, text:action.text }
default: return state;
}
}
//COMPONENT
const AddEx = ( props ) => (
<div>
<form onSubmit={(e) => {
e.preventDefault;
props.dispatch(addExpense ( {description: document.getElementById("addedEx").value} ))
console.log(document.getElementById("addedEx").value);
//it shows the correct value in the console but the state stays unchanged
} } >
<input type="text" id="addedEx"/>
<button type="submit">submit</button>
</form>
//SEARACH -> works
<input
type="text" value={props.filter.text}
onChange={(e) => {
props.dispatch(findText({text:e.target.value}))
}}
/>
</div>
)

Answer 1

You are adding the value to state instead of expenses, do return [...state.expense, action.expense]
//REDUCERS
const expenseReducer = (state = [], action) => {
switch (action.type) {
case 'ADD_EXPENSE':
return {
...state,
expense: [...state.expense, action.expense]
};
case 'EDIT_EXPENSE': //<- this works
return state.map(expense => {
if (expense.id === action.id)
return {
...expense,
...action.update
};
else return expense;
});
default:
return state;
}
};
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.6/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.0.3/react-redux.min.js"></script>
<script src="http://wzrd.in/standalone/uuid%2Fv1#latest"></script>
<div id="root"></div>
<script type="text/babel">
const { Provider, connect } = ReactRedux;
const { applyMiddleware, createStore, combineReducers } = Redux;
const ADD_EXPENSE = 'ADD_EXPENSE';
function addExpense(payload) {
return { type: ADD_EXPENSE, payload };
}
const initialState = {
expense: [],
};
function rootReducer(state = initialState, action) {
if (action.type === ADD_EXPENSE) {
return {
...state,
expense: [...state.expense, action.payload]
};
}
return state;
}
const store = createStore(rootReducer);
const mapStateToProps = state => {
return { expense: state.expense };
};
function mapDispatchToProps(dispatch) {
return {
addExpense: expense => dispatch(addExpense(expense))
};
}
const ConnectedList = ({ expense, addExpense }) => {
return (
<div>
<ul className="list-group list-group-flush">
{expense.map(el => (
<li className="list-group-item" key={el.id}>
{`${el.description} - $${el.amount}`}
</li>
))}
</ul>
</div>
);
};
const List = connect(
mapStateToProps,
)(ConnectedList);
class ExpenseForm extends React.Component {
state = {
description: '',
amount: 0,
}
handleSubmit = (e) => {
e.preventDefault();
if (!this.state.description || this.state.amount === 0) {
return
}
const { description, amount } = this.state;
this.props.addExpense({
description,
amount,
id: uuidv1()
});
this.setState({
description: '',
amount: 0
})
}
handleInput = (e) => {
this.setState({
[e.target.name]: e.target.value
})
}
render() {
return (
<form onSubmit={this.handleSubmit}>
<input name="description" placeholder="Description" onChange={this.handleInput} value={this.state.description} />
<input type="number" name="amount" placeholder="Amount" onChange={this.handleInput} value={this.state.amount} />
<input type="submit" />
</form>
)
}
}
const Form = connect(null, mapDispatchToProps)(ExpenseForm);
class App extends React.Component {
render() {
return (
<div>
<List />
<Form />
</div>
);
}
}
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);
</script>

Answer 2

I found the solution. It didn't work because e.preventDefault lacked the (). so simple change from e.preventDefault to e.preventDefault () fixed it. silly mistake.