如何在 MERN w/Redux 应用程序中单击时将状态设置为 'null'？

Question

我想在 React 中通过点击调用一个动作。我想要将商店中的对象设置为 null.

的操作

这是我的组件，点击将在此处发生。我希望当用户点击离开页面时状态为空。
这是我的尝试。在此期间，我了解到您无法导入和调用操作 nullPhoto。如果我用 connect 导入 nullPhoto，则对象一直是 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 而没有所有的 axios 东西。如何在没有 .then 附加到某物的情况下将对象单独发送到 null？

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

减速器是唯一我认为没有问题的东西。

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

Answer 1

您需要在 mapDispatchToProps

中绑定您的操作

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

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

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

然后，在您的组件中，该操作将通过 props 注入。所以你需要修改你的组件如下：


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>
    );
  }
}

Answer 2

将您的操作更改为以下内容，以删除 axios 调用。

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

还使用 connect 的第二个参数将调度映射到您的组件 props。

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

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

然后在组件的 clearPhoto 方法中调用映射到组件 props 的调度操作。

// (...)

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

// (...)

如何在 MERN w/Redux 应用程序中单击时将状态设置为 'null'？

How can I set a state to 'null' on click in a MERN w/ Redux app?

reactjs

redux

mern