如何创建切换导航栏以与 redux thunk 做出反应

Question

我正在使用带有 redux thunk 的反应。我创建了一个动作，两个减速器（一个父母和一个孩子）和一个商店。现在我将 reactstrap 用于导航栏，其中 this.state 方法用于切换导航栏，但我想 toggle 使用 调度动作 和 设置和从存储中获取状态。以下是我的代码：

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

您可以为 toggle 创建一个新操作，例如：

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

在减速器中：

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

  default:
   return state;
 }
}

你可以将reducers和action结合到redux的connect方法上。 您可以简单地将更新后的 props 值用于isOpen 属性。

编辑 应用组件将如下所示：

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

Answer 2

在同一个文件或您想要的任何文件中创建另一个操作

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}) 上添加该操作，并将该道具设置为 Collapse 组件的 isOpen 道具 (isOpen={this.props.navStatus})。

将调度映射到道具

mapDispatchToProps 是一个函数，它的名字可以是任何东西，但是为了可读性，我们将它命名为mapDispatchToProps，它有一个参数dispatch，如果你想访问组件中的一个动作作为道具你必须遵循这个语法，或者你可以简单地使用下面的语法

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

react-redux 会检查 mapDispatchToProps 是 action 还是 object，如果 value 是 object，react-redux 会自己做 dispatch 操作。