如何使用带有Redux的connect从this.props获得简单的调度?

JavaScript

Near猪猪

2020-03-12

我有一个连接的简单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"

这是带有连接方法的组件

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]

第1046篇《如何使用带有Redux的connect从this.props获得简单的调度?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
GreenSam 2020.03.12

虽然您可能dispatch成为的一部分dispatchToProps,但我建议您避免在组件内部访问storedispatch直接访问似乎最好在connect的第二个参数中传入绑定动作创建者来为您服务dispatchToProps

请参阅我在此处https://stackoverflow.com/a/34455431/2644281发布的示例,该示例说明如何传递“已经绑定的动作创建者”,这样您的组件就无需直接了解或依赖商店/发货。

抱歉,简短。我将更新瓦特/更多信息。

JinJin村村 2020.03.12

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

可以通过dispatch在作为道具,如果这是你想要什么:

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

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

使用dispatch目录排序将哑巴,无状态组件与redux 耦合这会使它的便携性降低。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android