我如何在mapDispatchToProps中访问组件的本地状态

Question

我目前是第一次开发react-redux应用。我尝试创建一个组件来选择尺寸并将此尺寸传递给商店。不幸的是，我了解到我无法在mapdispatchtoprops中访问组件的状态。是否有其他解决方案可以得到相同的结果？预先感谢！

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

您可以使用mergeProps。

const mapStateToProps = (state, props) => {
  console.log(props);
  return{
    outils : state.materielList,
    size: state.size, // add size as a state prop

  }
}

const mapDispachToProps = (dispach, ownprops) => {
  //console.log(ownprops);
  return{
    changeGear: () => dispach({type:'CHANGE'}),
    changeSize: (size)=>dispatch({type:'CHANGE_SIZE', value:size}) //use size value in dispatch
  }
}

const mergeProps = (stateProps, dispatchProps, ownProps) => {
    return{
        ...stateProps,
        ...dispatchProps,
        mySizeFunction: ()=> dispatchProps.changeSize(stateProps.size) //access state prop and dispatch prop
    }
}
export default connect(mapStateToProps, mapDispachToProps, mergeProps) (Choixfield);

您可以从组件中以道具形式访问mySizeFunction。