如何在 mapDispatchToProps 中访问组件本地 state

Question

我目前正在第一次开发 react-redux 应用程序。 我尝试创建一个组件来选择一个尺寸并将这个尺寸传递给商店。 不幸的是，我了解到我无法在 mapdispatchtoprops 中访问我的组件的 state .. 还有其他解决方案可以获得相同的结果吗？ 提前致谢！

import React from 'react';
import thunk from 'redux-thunk';
import InputLabel from '@material-ui/core/InputLabel';
import MenuItem from '@material-ui/core/MenuItem';
import FormControl from '@material-ui/core/FormControl';
import Select from '@material-ui/core/Select';

import ListItem from '@material-ui/core/ListItem';
import ListItemAvatar from '@material-ui/core/ListItemAvatar';
import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction';
import ListItemText from '@material-ui/core/ListItemText';
import Avatar from '@material-ui/core/Avatar';
import IconButton from '@material-ui/core/IconButton';
import FolderIcon from '@material-ui/icons/Folder';
import DeleteIcon from '@material-ui/icons/Delete';
import styles from './Choixfield.global.scss';
import Button from '@material-ui/core/Button';
//import materiel from './materiel.js';
import { connect } from 'react-redux';

class Choixfield extends React.Component {

    constructor(props) {
        super(props);
        this.props = props;
        this.name = this.props.name;
        this.partie = this.props.partie;
        this.property = this.props.property;
        //this.handleClose = this.handleClose.bind(this);
        this.handleOpen = this.handleOpen.bind(this);
        this.handleChange = this.handleChange.bind(this);
        //this.changeGear = this.props.changeGear.bind(this);

        this.state = {
          isOpen: false,
          size: 0
        };
    }

    /*handleClose() {
        this.setState(state => {
          return {
            isOpen: false
          };
        });
    }*/

    handleOpen() {
        console.log(this.state.size);
        this.setState(state => {
          return {
            isOpen: true
          };
        });
    }

    handleChange = (event) => {
      console.log("ça change " + event.target.value);
      console.log(this.state.size);
      this.setState(state => {
        return {
          property: event.target.value,
          isOpen: false
        };
      });
      console.log(this.state.size);
    }

    render() {
        return (
            <div id = "cfdiv">
            <FormControl>
                <InputLabel id="demo-controlled-open-select-label">{this.name}</InputLabel>
                <Select
                labelId="demo-controlled-open-select-label"
                id="demo-controlled-open-select"
                open={this.state.isOpen}
                onClose={this.props.changeGear}
                onOpen={this.handleOpen}
                value={this.state.size}
                onChange={this.handleChange}
                >

                <MenuItem value={0}>
                <em>None</em>
                </MenuItem>
                <MenuItem value={109}>Taille 9</MenuItem>
                <MenuItem value={110}>Taille 10</MenuItem>
                <MenuItem value={111}>Taille 11</MenuItem>
                <MenuItem value={112}>Taille 12</MenuItem>
                <MenuItem value={113}>Taille 13</MenuItem>
                <MenuItem value={114}>Taille 14</MenuItem>
                <MenuItem value={115}>Taille 15</MenuItem>
                <MenuItem value={116}>Taille 16</MenuItem>


                </Select>
            </FormControl>
            </div>
        );
    }
}

const mapStateToProps = (state, props) => {
  console.log(props);
  return{
    outils : state.materielList

  }
}

const mapDispachToProps = (dispach, ownprops) => {
  //console.log(ownprops);
  return{
    changeGear: () => dispach({type:'CHANGE'})
  }
}

export default connect(mapStateToProps, mapDispachToProps) (Choixfield);

Answer 1

在mapState或mapDispatch中访问组件的本地 state 是不可能的，因为这些函数在connect包装组件内部运行。 由于这是您实际组件的父级，因此无法读取组件内的 state 值。

您可能要考虑使用React-Redux 挂钩 API 代替。 因为这些钩子在您的组件内部运行，所以它们可以使用您定义的任何 state 值。

Answer 2

请在您的组件中使用一次 dispatch function。 像 this.props.changeGear(pass.some data here ) 这个方法应该在你想要为 eedux 发出动作的地方。 谢谢