Javascript mapDispatchToProps调度操作无法更新状态

在我的index.js中，

addCoin

操作正在运行

import { addCoin } from './reducer/portfolio/actions'

const element = document.getElementById('coinhover');

const store = createStore(reducer, compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
));

store.dispatch(addCoin('bitcoin'));

调用

store.dispatch

时，我可以在此处看到更新的状态。

但是，我不想从index.js调用分派操作，而是从组件内部调用分派操作

---

我的SearchCoin组件： 最后

selectCoin

clickCoin(coin) {
    console.log('clickCoin', coin);
    this.props.selectCoin(coin);
    this.props.closeSearch();
}

import { addCoin } from '../../reducer/portfolio/actions'

const mapDispatchToProps = (dispatch) => ({
    selectCoin(coin) {
        return () => {
            dispatch(addCoin(coin))
        }
    }
});

但是，当我单击该按钮时，由于redux状态没有发生任何变化，因此似乎没有触发调度

减速器 reducer/index.js

---

问题是你正在用一个额外的函数包装你的函数

更改：

const mapDispatchToProps = (dispatch) => ({
  selectCoin(coin) {
    return () => { <--- returning extra function
      dispatch(addCoin(coin))
    }
  }
})

---

除了azium answer，您还可以使用这样的操作。这样可以节省你的写作时间

export default connect(null, {addCoin})(SearchCoin)

你可以这样使用它

clickCoin(coin) {
    console.log('clickCoin', coin);
    this.props.addCoin(coin);
    this.props.closeSearch();
}

---

您是否尝试过使用

redux

中的

bindActionCreators

selectCoin:bindActionCreators（addCoin，dispatch）

在从

mapDispatchToProps

Ah bam返回的对象中！谢谢：德妮丝！伟大的提示和+1！这是否将动作创建者绑定到分派？

import { combineReducers } from 'redux'
import portfolio from './portfolio'

export default combineReducers({
    portfolio
});

const mapDispatchToProps = (dispatch) => ({
  selectCoin(coin) {
    return () => { <--- returning extra function
      dispatch(addCoin(coin))
    }
  }
})

const mapDispatchToProps = (dispatch) => ({
  selectCoin(coin) { dispatch(addCoin(coin)) }
})

export default connect(null, {addCoin})(SearchCoin)

clickCoin(coin) {
    console.log('clickCoin', coin);
    this.props.addCoin(coin);
    this.props.closeSearch();
}