В моем коде ниже у меня есть кнопка удаления, которая должна удалять данные при нажатии. Однако, когда я нажимаю на него, я вижу через console.log, что он возвращает undefined вместо номера идентификатора. Кажется, не могу понять почему. Любая помощь будет оценена. Спасибо.

// Файл действий

export const GET_ITEMS           = 'GET ITEMS';
export const FETCH_ITEMS_SUCCESS = 'FETCH ITEMS SUCCESS';
export const FETCH_ITEMS_ERROR   = 'FETCH ITEMS ERROR';
export const DELETE_ITEM         = 'DELETE_ITEM';

    export const getItems = () => ({
      type: GET_ITEMS
    });
    
    export const deleteItem = (itemId) => ({
      type   : DELETE_ITEM,
      payload: itemId
    });

//App.js

    class App extends Component {
      componentDidMount() {
        this.props.getItems()
      }
    
    static propTypes = {
      getItems: PropTypes.func.isRequired,
      deleteItem: PropTypes.func.isRequired
    }
    handleDelete = (id) =>{
      this.props.deleteItem(id)
      console.log(this.props.deleteItem(id));
    }
    
    
      render() {
    const { itemsList} = this.props.items
        return (
          <div className="container app-wrapper">
            <header>
            {itemsList.map(item => (<h1 key={item.id}>{item.title} <button onClick={this.handleDelete.bind(this, item.id)}>delete</button></h1>))}
            </header>
          </div>
        );
      }
    }
    
    const mapStateToProps = state => ({
      items: state.items
    });
    export default connect(mapStateToProps, {getItems, deleteItem})(App);
1
tim_woods 4 Дек 2020 в 23:41

2 ответа

Лучший ответ

Отправленное действие должно вернуть undefined, потому что оно ничего не возвращает. Вы неправильно понимаете, как данные передаются в шаблоне Redux / reducer.

Вот базовый процесс обновления Redux:

  1. Действие отправлено.
  2. Все редукторы получают объект действия.
  3. Все редукторы возвращают свое новое или предыдущее состояние в зависимости от содержимого этого действия.
  4. connect видит, что состояние Redux изменилось, и запускает повторную визуализацию дочерних компонентов.
  5. Теперь вы можете использовать обновленные данные из вашего магазина Redux через реквизиты (отображены в mapStateToProps).

Вы не можете вызвать действие и получить обновленное состояние в качестве возвращаемого значения. Это ломает фундаментальный паттерн того, как данные передаются / обновляются в Redux.

2
Brian Thompson 4 Дек 2020 в 20:55

Вы неправильно ссылаетесь на свое действие удаления в соединении. deleteItem ожидает, что в него будет передан параметр id.

Попробуй это,

const mapStateToProps = state => ({
      items: state.items
    });

const mapDispatchToProps = (dispatch) =>
{
    return {
        deleteItem: (id) => dispatch(actions.deleteItem(id)),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(App);
0
App City 4 Дек 2020 в 21:27