Question

我有一个简单的组件正在尝试使用redux。我同时绘制了道具和调度动作，但是只有最初从商店获得的道具才能正常工作。我将其全部归结为我的行动：正在调度它们，但是各个减速器实际上并没有做任何事情。根据该教程，我想到了非常简单的内容，对我来说一切看起来都很不错，但是我无法在这里解决问题。

这是该应用程序的简化版：

// index.js

import React from 'react'
import ReactDOM from 'react-dom'
import Search from './Search'
import { Provider } from 'react-redux'
import store from './store'

const root = document.querySelector('#app')
ReactDOM.render(
  <Provider store={store}>
    <Search/>
  </Provider>, root)

// Search.js

import React from 'react'
import { setText } from '../../actions/appActions'
import { connect } from 'react-redux';

const mapStateToProps = state => {
  return {
    text: state.app.searchText
  }
}

const mapDispatchToProps = dispatch => {
  return {
    setText,
    dispatch
  }
}

class Search extends React.Component {

  constructor() {
    super()
  }
  render() {
    return (
      <input type="text" onChange={() => this.props.setText("text")} value={this.props.text}/>
    )
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Search)

// store.js

import { createStore, combineReducers } from 'redux'

import app from './reducers/appReducer'

export default createStore(combineReducers({/*other non-relevant reducers*/, app}))

// appActions.js
export function setText(text) {
  return {
    type: "APP_SET_TEXT",
    payload: text,
  }
}

// appReducer.js

const initialState = {
  isSearchActive: true,
  searchText: "Text",
}

export default function reducer(state = initialState, action) {
  switch (action.type) {
    case "APP_SET_TEXT":
      console.log("fart")
      return {
        ...state,
        searchText: action.payload,
    }
    default:
      return state
  }
}

我想要做的就是简单地根据redux状态更改输入值。我确实从{this.props.text}获得了文本，正在调度变更处理程序onChange={() => this.props.setText("text")}，但是化简器由于某种原因未能捕获已调度的动作。

Answer 1

我认为您应该像下面这样更改mapDispatchToProps变量：

const mapDispatchToProps = dispatch => {
  return {
    setText = (text) => dispatch(setText(text)),
  }
}

Answer 2

有两种方法可以实现这一目标

// MODIFYING DISPATHCER
const mapDispatchToProps = dispatch => {
  return {
    changeText: data => dispatch(setText(data)),
  }
}

或

// CONNECT

export default connect(mapStateToProps, {
    setText
})(Search)

Answer 3

const mapDispatchToProps = dispatch => {
  return {
    setText,
    dispatch
  }
}

更改为

const mapDispatchToProps = dispatch => {
  return {
    changeText: text => dispatch(setText(text)),
  }
}

在您的组件中使用this.props.changeText函数

Answer 4

大多数答案都建议您可以调度操作，否则就可以让mapDispatchToProps一个对象。

mapDispatchToProps = {
   setText,
   dispatch
}

您的HOC连接应注意不需要外部定义的调度

Answer 5

使用bindActionCreators中的redux

import { bindActionCreators } from 'redux';

const mapDispatchToProps = dispatch => {
  const setText = bindActionCreators(setText, dispatch);
  return setText;
}

Answer 6

因为您正在将调度映射到以下道具：

const mapDispatchToProps = dispatch => {
  return {
    setText,
    dispatch
  }
}

您需要在组件中显式调用dispatch：

class Search extends React.Component {

  constructor() {
    super()
  }
  render() {
    const {dispatch, setText} = this.props; 
    return (
      <input type="text" onChange={() => dispatch(setText("text"))} value={this.props.text}/>
    )
  }
}

将分发映射到以下道具更容易：setText = (text) => dispatch(setText(text))

React-redux connect（）未正确订阅分派的动作

6 个答案: