Javascript 如何使用connect w/Redux从this.props获得简单的分派？

我已经连接了一个简单的React组件（映射一个简单的数组/状态）。为了避免引用商店的上下文，我想要一种直接从道具获取“分派”的方法。我见过其他人使用这种方法，但由于某些原因无法访问：）

下面是我当前使用的每个npm依赖项的版本

"react": "0.14.3",
"react-redux": "^4.0.0",
"react-router": "1.0.1",
"redux": "^3.0.4",
"redux-thunk": "^1.0.2"

下面是组件w/connect方法

class Users extends React.Component {
    render() {
        const { people } = this.props;
        return (
            <div>
                <div>{this.props.children}</div>
                <button onClick={() => { this.props.dispatch({type: ActionTypes.ADD_USER, id: 4}); }}>Add User</button>
            </div>
        );
    }
};

function mapStateToProps(state) {
    return { people: state.people };
}

export default connect(mapStateToProps, {
    fetchUsers
})(Users);

如果您需要了解我的路由器是如何通过redux配置的

const createStoreWithMiddleware = applyMiddleware(
      thunk
)(createStore);

const store = createStoreWithMiddleware(reducers);

var Route = (
  <Provider store={store}>
    <Router history={createBrowserHistory()}>
      {Routes}
    </Router>
  </Provider>
);

const createStoreWithMiddleware=applyMiddleware(
砰
)（createStore）；
const store=createStoreWithMiddleware（reducers）；
var路由=(
{Routes}
);

更新

看起来如果我在connect中省略了我自己的分派（目前我正在向fetchUsers展示），我将获得免费分派（只是不确定这是否是一个带有异步操作的安装程序通常的工作方式）。人们是混搭呢，还是全部混搭

---

[mapDispatchToProps]

您通常可以根据自己的喜好进行混搭

如果需要，您可以将

dispatch

作为道具传递：

export default connect(mapStateToProps, (dispatch) => ({
    ...bindActionCreators({fetchUsers}, dispatch), dispatch
}))(Users);

我不确定如何使用

fetchUsers

（作为异步函数？），但您通常会使用

bindActionCreators

之类的工具来自动绑定分派，这样您就不必担心直接在连接的组件中使用

dispatch

---

使用

dispatch

directory排序将哑的、无状态的组件与redux进行耦合。这会降低它的可移植性。

虽然您可以将

dispatch

作为

dispatchToProps

的一部分传递，但我建议避免直接从组件中访问

存储

或

dispatch

。在connect的第二个参数

dispatchToProps

请看我在这里发布的一个示例，该示例介绍了如何通过这种方式传递“已绑定的操作创建者”，您的组件不需要直接了解或依赖存储/分派

---

对不起，我的发言很简短。我将更新更多信息。

默认情况下

mapDispatchToProps

只是

dispatch=>（{dispatch}）

因此，如果您不将第二个参数指定给

connect（）

，您将得到

dispatch

作为一个道具注入到组件中

如果将自定义函数传递给

mapDispatchToProps

，则可以对该函数执行任何操作。
举几个例子：

// inject onClick
function mapDispatchToProps(dispatch) {
  return {
    onClick: () => dispatch(increment())
  };
}

// inject onClick *and* dispatch
function mapDispatchToProps(dispatch) {
  return {
    dispatch,
    onClick: () => dispatch(increment())
  };
}

为了节省您的时间，Redux提供了

bindActionCreators（）

，您可以使用它：

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return {
    onPlusClick: () => dispatch(increment()),
    onMinusClick: () => dispatch(decrement())
  };
}

为此：

import { bindActionCreators } from 'redux';

// injects onPlusClick, onMinusClick
function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    onPlusClick: increment,
    onMinusClick: decrement
  }, dispatch);
}

当道具名称与动作创建者名称匹配时，甚至更短：

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

如果您愿意，您可以手动添加

dispatch

：

// injects increment, decrement, and dispatch itself
function mapDispatchToProps(dispatch) {
  return {
    ...bindActionCreators({ increment, decrement }), // es7 spread syntax
    dispatch
  };
}

对于你是否应该这样做没有官方的建议

connect（）

通常作为Redux-aware和Redux-unaware组件之间的边界。这就是为什么我们通常认为注入绑定动作创建者和

调度

是没有意义的。但是如果你觉得你需要这样做，请随意

最后，您现在使用的模式是一种比调用

bindActionCreators

更短的快捷方式。当您只需返回

bindActionCreators

时，您可以省略调用，而不是执行以下操作：

// injects increment and decrement
function mapDispatchToProps(dispatch) {
  return bindActionCreators({ increment, decrement }, dispatch);
}

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

可以这样写

export default connect(
  mapStateToProps,
  { increment, decrement } // injects increment and decrement
)(App);

---

然而，每当您想要更自定义的东西时，您就必须放弃这个漂亮的简短语法，比如传递

dispatch

。

您所建议的不会起作用。您将得到一个未绑定的

fetchUsers

作为道具注入。快捷方式表示法仅在将对象作为第二个参数传递时有效。传递函数时，您必须调用

bindActionCreators

自己：

dispatch=>（{…bindActionCreators（{fetchUsers}，dispatch），dispatch}）

。为什么直接在bindActionCreators中传播和传递dispatch

dispatch=>（bindActionCreators（{dispatch，fetchUsers}，dispatch））

@DanAbramov btw是

bindActionCreators（actionCreators，dispatch）

中的第二个参数吗？我注意到在您的代码的

//es7 spread syntax

行中，

dispatch

没有传递给

bindActionCreators

什么是增量方法？es7 spread语法应该是

函数mapDispatchToProps（dispatch）{返回{…bindActionCreators（{increment，decrement}），dispatch}；}

export default connect(
  mapStateToProps,
  { increment, decrement } // injects increment and decrement
)(App);