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"

这是带/ 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;
};

如果您需要查看我的路由器如何配置/ redux

const createStoreWithMiddleware = applyMiddleware(
      thunk
)(createStore);

const store = createStoreWithMiddleware(reducers);

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

更新

看起来如果我在连接中省略了我自己的调度(目前我上面显示了fetchUsers),我就可以免费调度(只是不确定这是否通常是异步操作的设置)。 人们混合搭配还是全有或全无?

[mapDispatchToProps]

Toran Billups asked 2019-08-11T04:02:03Z
3个解决方案
266 votes

默认dispatch就是bindActionCreators
因此,如果您没有指定connect()的第二个参数,那么您将在组件中注入dispatch作为道具。

如果将自定义函数传递给dispatch,则可以对该函数执行任何操作。
几个例子:

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

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

为了节省你一些输入Redux提供了dispatch,让你转过来:

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

关于你是否应该这样做,没有正式的建议。 dispatch通常用作Redux-aware和Redux-unaware组件之间的边界。 这就是为什么我们通常认为注入绑定动作创建者和bindActionCreators是没有意义的。但是如果你觉得你需要这样做,请随意。

最后,您现在使用的模式是一个快捷方式,甚至比调用dispatch更短。当您所做的只是返回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

Dan Abramov answered 2019-08-11T04:03:30Z
5 votes

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

如果你想要的话,你可以通过dispatch作为道具:

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

我不确定如何使用dispatch(作为异步函数?),但您通常会使用bindActionCreators之类的东西来自动绑定调度,然后您不必担心直接在连接的组件中使用dispatch

使用dispatch目录排序将dumb,无状态组件与redux相结合。 这可以减少便携性。

Davin Tryon answered 2019-08-11T04:04:16Z
1 votes

虽然您可以将dispatch作为dispatchToProps的一部分通过,但我建议您不要直接从组件中访问storedispatch。 在连接的第二个参数dispatchToProps中传递一个绑定的动作创建者似乎会更好

请参阅我在此发布的一个示例[https://stackoverflow.com/a/34455431/2644281],了解如何传递一个已经绑定的动作创建者&#34; 这样,您的组件就不需要直接了解或依赖于存储/发送。

很抱歉要简短。 &#39;将使用/更多信息进行更新。

Erik Aybar answered 2019-08-11T04:04:58Z
translate from https://stackoverflow.com:/questions/34458261/how-to-get-simple-dispatch-from-this-props-using-connect-w-redux