Как создать переключатель Navbar в реагировать с Redux Thunk

Question

Я использую реагировать с редуксом.Я создал одно действие, два редуктора (один родитель и один ребенок) и магазин.Теперь я использую реагирующий ремешок для панели навигации, и в этом метод this.state используется для переключения панели навигации, но я хочу сделать переключение с отправкой действия и установка и получение состояния из хранилища .Ниже мой код:

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

После того, как вы можете объединить редукторы и действиена метод подключения редукса.Вы можете просто использовать обновленное значение реквизита для атрибута isOpen.

EDIT компонент приложения будет выглядеть так:

...
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()),
})

, добавьте это действие к событию onClick * NavbarToggler (onClick={this.props.toggleNav}) и установите его для пропуска isOpen (isOpen={this.props.navStatus}) компонента Collapse.

Map Dispatch To Props

mapDispatchToProps - это функция, ее имя может быть любым, но для удобства чтения мы называем ее mapDispatchToProps, у нее есть параметр dispatch, если вы хотите получить доступ к действию внутрикомпонент в качестве подпорки, вы должны следовать этому синтаксису, или вы можете просто использовать следующий синтаксис

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

act-redux проверит, является ли mapDispatchToProps действием или объектом, если значение является объектом, то response-redux будет выполнятьдиспетчерские операции itslef.