如何获得简单的调度从this.props使用连接w/Redux？

Question

我已经连接了一个简单的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);

如果你需要看减速机（没有什么令人兴奋的，但在这里）

const initialState = {
    people: []
};

export default function(state=initialState, action) {
    if (action.type === ActionTypes.ADD_USER) {
        let newPeople = state.people.concat([{id: action.id, name: 'wat'}]);
        return {people: newPeople};
    }
    return state;
};

如果你需要看看我的路由器是如何配置的w/redux

const createStoreWithMiddleware = applyMiddleware(
      thunk
)(createStore);

const store = createStoreWithMiddleware(reducers);

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

使现代化

看起来如果我在连接中省略了我自己的调度（目前在上面我显示的是getchUser），我将获得免费的调度（只是不确定这是否是使用异步操作的设置通常的工作方式）。人们是混搭还是全有还是全无？

[mapDispatchToProps]

Answer 1

虽然您可以将调度作为调度ToProps的一部分向下传递，但我建议避免直接从组件中访问store或调度。看起来通过在连接的第二个参数调度ToProps中传递一个绑定的操作创建者会更好

查看我在这里发布的一个示例https://stackoverflow.com/a/34455431/2644281如何传递一个“已经绑定的操作创建者”，这样你的组件就不需要直接知道或依赖于存储/调度。

抱歉简短。我会更新更多信息。

Answer 2

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

如果需要，您可以将dispatch作为道具传递：

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

我不确定如何使用fetchUsers（作为异步函数？），但是您通常会使用类似于bindActionCreators的东西来自动绑定分派，这样您就不必担心直接在连接的组件中使用dispatch。

使用dispatchdirectory排序将哑的、无状态的组件与redux进行耦合。这会降低它的便携性。

Answer 3

默认情况下，mapDispatchToProps只是dispatch=

如果将自定义函数传递给mapDispatchToProps，则可以对该函数执行任何操作
举几个例子：

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

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

为了节省你一些键入Redux提供了bindActionCreator（），让你把这个：

// 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
  };
}

没有官方建议是否应该这样做。连接（）通常作为Redux感知和Redux不感知组件之间的边界。这就是为什么我们通常觉得同时注入绑定操作创建者和调度是没有意义的。但是如果你觉得你需要这么做，请随意。

最后，您现在使用的模式是一个比调用bindActionCreator更短的快捷方式。当您所做的只是返回bindActionCreator时，您可以省略调用，而不是这样做：

// 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。