Как получить доступ к локальному состоянию компонента в mapDispatchToProps - PullRequest
Новая
       56

Как получить доступ к локальному состоянию компонента в mapDispatchToProps

0 голосов
/ 05 апреля 2020

Я в настоящее время разрабатываю приложение Reaction-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);

Ответы [ 2 ]

0 голосов
/ 05 апреля 2020

Пожалуйста, используйте функцию отправки один раз в вашем компоненте. Например this.props.changeGear (данные pass.some здесь). Этот метод должен быть там, где вы хотите выполнить действие для eedux. Thanx

0 голосов
/ 05 апреля 2020

Невозможно получить доступ к локальному состоянию компонента в mapState или mapDispatch, потому что эти функции выполняются внутри компонента-оболочки connect. Так как это родительский элемент вашего фактического компонента, нет способа прочитать значения состояния внутри вашего компонента.

Возможно, вы захотите использовать API перехватчиков React-Redux вместо . Поскольку эти перехватчики выполняются внутри вашего компонента, они могут использовать любые значения состояния, которые вы определили.

...