Question

我正在使用redux thunk反应。我创建了一个动作，两个减速器（一个父母和一个孩子）和一个商店。现在，我在navbar中使用reactstrap，在这种情况下， this.state 方法用于切换navbar，但是我想通过调度动作< / strong>，然后设置并从商店获取状态。下面是我的代码：

/ * App.js * /

import React from "react"; import { connect } from 'react-redux'; import { Collapse, Navbar, NavbarToggler, NavbarBrand, Nav, NavItem, NavLink } from 'reactstrap'; import { simpleAction } from './actions/simpleAction'; const mapStateToProps = state => ({ ...state }) const mapDispatchToProps = dispatch => ({ simpleAction: () => dispatch(simpleAction()) }) class App extends React.Component { constructor(props) { super(props); this.toggle = this.toggle.bind(this); this.state = { isOpen: false }; } toggle() { this.setState({ isOpen: !this.state.isOpen }); } simpleAction = (event) => { this.props.simpleAction(); } render() { return ( <div> <Navbar color="light" light expand="md"> <NavbarBrand href="/">reactstrap</NavbarBrand> <NavbarToggler onClick={this.toggle} /> <Collapse isOpen={this.state.isOpen} navbar> <Nav className="ml-auto" navbar> <NavItem> <NavLink href="/components/">Components</NavLink> </NavItem> <NavItem> <NavLink href="https://github.com/reactstrap/reactstrap">GitHub</NavLink> </NavItem> </Nav> </Collapse> </Navbar> </div> ); } } export default connect(mapStateToProps, mapDispatchToProps)(App);

/ * simpleAction.js * /

export const simpleAction = () => dispatch => { dispatch({ type: 'SIMPLE_ACTION', payload: 'result_of_simple_action' }) }

/ * simpleReducer.js * /

export default (state = {}, action) => { switch (action.type) { case 'SIMPLE_ACTION': return { result: action.payload } default: return state } }

Answer 1

在同一文件或所需的任何文件中创建另一个操作

export const toggleNav = () => dispatch => {
 dispatch({
  type: 'TOGGLE_NAV',
 })
}

和一个减速器

export default (state = false, action) => {
 switch (action.type) {
  case 'TOGGLE_NAV':
   return !state;

  default:
   return state;
 }
}

使用键navStatus将其添加到联合减速器中并按照以下方式更新mapDispatchToProps

const mapDispatchToProps = dispatch => ({
  simpleAction: () => dispatch(simpleAction()),
  toggleNav: () => dispatch(toggleNav()),
})

在NavbarToggler onClick事件（onClick={this.props.toggleNav}）上添加该动作，并将该道具设置为isOpen={this.props.navStatus}组件的isOpen道具（Collapse）。

将地图发送至道具

mapDispatchToProps是一个函数，它的名称可以是任何东西，但是出于可读性考虑，我们将其命名为mapDispatchToProps，它具有一个参数dispatch，如果您想作为props访问组件中的一个动作您必须遵循此语法，也可以只使用以下语法

export default connect(mapStateToProps, { simpleAction, toggleNav })(App);
//or
export default connect(mapStateToProps, { 
  simpleAction: simpleAction,
  toggleNav: toggleNav,
})(App);

react-redux将检查mapDispatchToProps是action还是object，如果该值是object，则red-redux将对其进行分派操作。

Answer 2

您可以为切换创建新动作，例如：

export const toggleAction = () => dispatch => {
 dispatch({
  type: 'TOGGLE_ACTION'
 })
}

以及在reducer中：

export default (state = { isOpen: false }, action) => {
 switch (action.type) {
  case 'TOGGLE_ACTION':
   state.isOpen = !state.isOpen;
   return state;

  default:
   return state;
 }
}

在您可以将化简器和操作组合到redux的connect方法上之后。您只需在isOpen属性上使用更新的props值即可。

编辑该应用程序组件将类似于：

...
import { toggleAction } from './actions/toogleAction';

const mapStateToProps = state => ({
  ...state
})
const mapDispatchToProps = dispatch => ({
  simpleAction: () => dispatch(simpleAction()),
  toggleAction: () => dispatch(toggleAction())
})

class App extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
  }
  toggle() {
    this.props.toggleAction();
  }
  simpleAction = (event) => {
   this.props.simpleAction();
  }
  render() {
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.props.isOpen} navbar>
            ...
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

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

如何在与redux thunk反应时创建切换导航栏

2 个答案:

将地图发送至道具