Как я могу установить состояние "null" при нажатии в приложении MERN с Redux?

Question

Я хочу вызвать действие в React одним щелчком мыши. Я хочу, чтобы действие установило для объекта в магазине значение null.

Вот мой компонент, в котором будет происходить щелчок. Я хочу, чтобы состояние было нулевым, когда пользователь нажимает, чтобы покинуть страницу. Это была моя попытка. Во время которого я узнал, что вы не можете импортировать и вызывать действие nullPhoto. Если я импортирую nullPhoto с connect, объект всегда будет null.

import React, { Component } from 'react';
import {
  Navbar,
  NavItem,
  Container
} from 'reactstrap';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom'
import Headroom from 'react-headroom'
import Logout from '../auth/Logout'
import { nullPhoto } from '../actions/photoActions';

class AppNavbar extends Component {

  clearPhoto() {
    this.nullPhoto()
  }

  render() {
    return (
      <div>
        <Headroom>
        <Navbar >
          <Container>
            <Link to={'/'} >
              <h4 className="home-text" onClick={this.clearPhoto} >Home</h4>
            </Link>
            <NavItem>
              <Logout/>
            </NavItem>
          </Container>
        </Navbar>
        </Headroom>
      </div>
    );
  }
}



const mapStateToProps = state => ({
  auth: state.auth,
  array: state.photos.array,
});

export default connect(
  mapStateToProps,
  null
)(AppNavbar);  

Мое действие тоже требует доработки. Я не знаю, как заставить его просто установить объект на null без всяких вещей ax ios. Как мне отправить объект в нулевое значение без привязки к чему-либо .then?

export const nullPhoto = file => (dispatch) => {
  axios
  .get('/api/items')
  .then(res =>
    dispatch({
      type: NULL_PHOTO,
    })
  )
}

Редуктор - единственное, с чем я не думаю, что есть проблема.

case NULL_PHOTO:
    return {
    ...state,
    array: null
  }

Answer 1

Измените свое действие на следующее, чтобы удалить вызов axios.

export const nullPhoto = () => ({ type: NULL_PHOTO});

Также сопоставьте отправку вашим компонентам props со вторым аргументом connect.

const mapDispatchToProps = dispatch => ({
  nullPhoto: () => dispatch(nullPhoto()),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps // <-- Here
)(AppNavbar); 

Затем вызовите действие отправки, которое сопоставлено вашим компонентам props в методе clearPhoto вашего компонента.

// (...)

clearPhoto = () => {
  this.props.nullPhoto()
}

// (...)

Answer 2

Вам нужно привязать свое действие к вашему mapDispatchToProps

const mapStateToProps = state => ({
  auth: state.auth,
  array: state.photos.array,
});

const mapDispatchToProps = dispatch => ({
  setNullPhoto: () => dispatch(nullPhoto()),
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(AppNavbar); 

Затем в вашем компоненте это действие будет внедрено через props. Итак, вам нужно изменить свой comp onet следующим образом:

class AppNavbar extends Component {

  clearPhoto() {
    this.props.setNullPhoto()
  }

  render() {
    return (
      <div>
        <Headroom>
        <Navbar >
          <Container>
            <Link to={'/'} >
              <h4 className="home-text" onClick={this.clearPhoto} >Home</h4>
            </Link>
            <NavItem>
              <Logout/>
            </NavItem>
          </Container>
        </Navbar>
        </Headroom>
      </div>
    );
  }
}