javascript - 如何使用 connect w/Redux 从 this.props 获得简单的调度？

Question

我有一个连接起来的简单 React 组件(映射一个简单的数组/状态)。为了避免引用商店的上下文，我想要一种直接从 Prop 中获取"dispatch"的方法。我见过其他人使用这种方法，但由于某种原因无法访问它:)

这是我目前使用的每个 npm 依赖项的版本

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

这是带有连接方法的组件

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);

如果您需要查看 reducer (没什么令人兴奋的，但就在这里)

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

如果你需要查看我的路由器是如何使用 redux 配置的

const createStoreWithMiddleware = applyMiddleware(
      thunk
)(createStore);

const store = createStoreWithMiddleware(reducers);

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

更新

看起来如果我在连接中省略我自己的分派(dispatch)(目前在上面我正在显示 fetchUsers)，我将获得免费分派(dispatch)(只是不确定这是否是带有异步操作的设置通常的工作方式)。人们是混合搭配还是全有或全无？

[mapDispatchToProps]

Answer 1

默认 mapDispatchToProps 只是 dispatch => ({ dispatch })。
因此，如果您不为 connect() 指定第二个参数，您将在组件中将 dispatch 作为 prop 注入(inject)。

如果您将自定义函数传递给 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);
}

当 Prop 名称与 Action 创建者名称匹配时甚至更短:

// 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 的组件和不支持 Redux 的组件之间的边界。这就是为什么我们通常觉得注入(inject) both 绑定(bind) Action 创建者和 dispatch 没有意义。但是，如果您觉得需要这样做，请随意。

最后，您现在使用的模式是一个比调用 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。