Как ссылаться на состояние реагирующего компонента в вспомогательной функции - PullRequest
Новая
       7

Как ссылаться на состояние реагирующего компонента в вспомогательной функции

0 голосов
/ 03 февраля 2020

Я новичок в избыточности, и я могу найти много информации о том, как передать состояние избыточности компоненту, но не наоборот, поэтому я не уверен, что ищу правильный словарь. Но, по сути, я хочу иметь возможность ссылаться на текущее состояние реагирующего компонента в функции помощника редукса, это то, что я сделал - и я получаю TypeError: dispatch is not a function и handleSubmit просто запускается, как только страница загружено:

App.js

render() {
  return (
    <div className="App">
      <p>{this.state.id}</p>
      <form onSubmit={this.handleSubmit(this.state.id)}>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

const mapDispatchToProps = dispath => bindActionCreators({ 
  handleSubmit
}, dispath);

export default connect(
  mapDispatchToProps  
)(App);

reducers.js

export const handleSubmit = (test) => {
  window.open("http://localhost:5000/"+test);
}

//Reducer
export default (state = [], action) => {
  switch (action.type) {
    default:
      return state;
  }
};

Ответы [ 2 ]

1 голос
/ 03 февраля 2020

Вам нужно поставить id в состояние приложения и управлять им через приставку. Код ниже поможет вам. 

// App.js

render() {
  return (
    <div className="App">
      <p>{this.props.id}</p>
      <form onSubmit={this.props.ActionSubmit(this.props.id)}>
        <button type="submit">Submit</button>
      </form>
    </div>
  )
}

const mapStateToProps = store => ({
    id: store.appReducer.id,
})

const mapDispatchToProps = dispath => bindActionCreators({ 
  ActionSubmit
}, dispath);

export default connect(
  mapStateToProp,
  mapDispatchToProps  
)(App);

// reducers.js

export ACTION_SUBMIT = 'ACTION_SUBMIT'

export const ActionSubmit = id => ({
    type: ACTION_SUBMIT,
    payload: {
        id,
    }
})

const initialState = {
    id: 0,
}

const doSubmit = (id) => {
  window.open("http://localhost:5000/"+id);
}

export default AppReducer(state = initialState, action) {
    switch(action.type) {
        case ACTION_SUBMIT:
            doSubmit( action.payload.id)
            return {
                id: action.payload.id,
            }
        default:
            return state
    }
}
1 голос
/ 03 февраля 2020

Во-первых, вы не используете функцию, которая react-redux проходит через props, и пытаетесь вызвать handleSubmit для самого компонента.

Вы также вызываете функцию внутри onSubmit немедленно вместо передачи ссылки на функцию, поэтому поместите ее в функцию стрелки и используйте handleSubmit из this.props

onSubmit={() => this.props.handleSubmit(this.state.id)}

Во-вторых, первый аргумент connect функция отображения, чтобы получить фрагмент состояния, называемого mapStateTpProps по соглашению, передать null в качестве первого аргумента.

также нет необходимости использовать bindActionCreators, и вы можете просто передать объект с функциями и react-redux обернет их в dispatch для вас 

export default connect(
  null,
  { handleSubmit }  
)(App);
...