добавление объекта в массив с помощью приставки

Question

У меня проблема с редуксом.когда я использую store.dispatch( addExpense( {description: "Rent"} ) ); в моем файле app.js, он работает, и объект добавляется.Но когда я пытаюсь использовать его в контексте компонента в отдельном файле, это не так.Консоль не выдает никакой ошибки.Когда я использую другие действия, такие как «поиск» в том же компоненте, он работает нормально.Так что проблем со связью нет.Кажется, что по некоторым причинам это не может изменить состояние.

//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

Я нашел решение. Это не сработало, потому что e.preventDefault не хватало () . так простое изменение от e.preventDefault к e.preventDefault () исправило это. глупая ошибка.

Answer 2

Вы добавляете значение в состояние вместо expenses, делаете 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>