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

IT技术 javascript reactjs redux
2021-03-29 05:37:42

我有一个简单的 React 组件可以连接（映射一个简单的数组/状态）。为了避免引用 store 的上下文，我想要一种直接从 props 获取“调度”的方法。我见过其他人使用这种方法，但由于某种原因无法访问它:)

这是我当前使用的每个 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);

如果您需要查看减速器（没什么令人兴奋的，但在这里）

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]

3个回答

默认情况下mapDispatchToProps只是dispatch => ({ dispatch }).
因此，如果您没有为 指定第二个参数connect()，您将dispatch作为组件中的props被注入。

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

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

// 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 组件之间的边界。这就是为什么我们通常觉得它没有意义注入两个有时限的行动创造者和dispatch。但如果你觉得你需要这样做，请随意。

最后，您现在使用的模式是一个比调用bindActionCreators. 当您所做的只是 return 时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，就必须放弃这种简洁的语法。

什么是内部增量方法？
2021-05-27 05:37:42
@DanAbramov btw 是bindActionCreators(actionCreators, dispatch)可选的第二个参数吗？我注意到在你的代码中// es7 spread syntax，dispatch没有传递给bindActionCreators
2021-06-16 05:37:42
es7 扩展语法应该是 function mapDispatchToProps(dispatch) { return { ...bindActionCreators({ increment, decrement }), dispatch }; }
2021-06-20 05:37:42

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

如果这是你想要的，你可以dispatch作为props传递：

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

我不知道如何fetchUsers使用（如异步功能？），但你通常会使用类似bindActionCreators来自动绑定调度，然后你就不必担心使用dispatch直接连接的部件。

使用dispatch目录排序将愚蠢的、无状态的组件与 redux 结合起来。这会使它的便携性降低。

你的建议是行不通的。你会得到一个未绑定的fetchUsers作为道具注入。快捷符号仅在您将对象作为第二个参数传递时才有效。当你传递一个功能你必须调用bindActionCreators自己：dispatch => ({ ...bindActionCreators({ fetchUsers }, dispatch), dispatch })。
2021-05-31 05:37:42
为什么在bindActionCreators中直接传播和传入dispatch？ dispatch => ( bindActionCreators({ dispatch, fetchUsers }, dispatch))
2021-06-20 05:37:42

虽然您可以dispatch作为 的一部分传递下去dispatchToProps，但我建议避免直接从您的组件内部访问store或dispatch。似乎通过在连接的第二个参数中传递绑定动作创建者会更好地为您服务dispatchToProps

请参阅我在此处发布的示例https://stackoverflow.com/a/34455431/2644281，了解如何通过这种方式传递“已绑定的动作创建者”，您的组件无需直接了解或依赖于商店/分派.

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

其它你可能感兴趣的问题
上一篇如何在 reactjs 应用程序中包含 bootstrap css 和 js？ 下一篇Webpack 如何构建生产代码以及如何使用它