Question

我有以下文件：

index.js

const store = createStore(...)
ReactDOM.render(<Provider store={store}><BrowserRouter><App/></BrowserRouter></Provider>, document.getElementById('root'));

App组件：（App.js）

const App = withRouter(connect(mapStateToProps, mapDispatchToProps)(Main))
export default App

那么我如何才能在store.dispatch组件内部访问Main？如果我尝试通过store.dispatch({...})进行操作，则会得到：

'store'未定义为no-undef

Answer 1

如果mapDispatchToProps看起来像：

const mapDispatchToProps = dispatch => ({
    myAction1: () => dispatch(myAction1())
});

connect(mapStateToProps, mapDispatchToProps)(Main)

...然后在组件中，您可以调用this.props.myAction1()

如果mapDispatchToProps使用bindActionCreators：

const actions = { myAction1, myAction2 };

const mapDispatchToProps = dispatch => bindActionCreators(actions, dispatch);

...然后在组件中，您可以调用this.props.myAction1()和this.props.myAction2()

如果mapDispatchToProps未定义：

connect(mapStateToProps)(Main)

然后在组件中，您可以访问this.props.dispatch

Answer 2

调度功能应该可以通过this.props获得 this.props.dispatch（）

Answer 3

您的组件不应直接访问商店-connect会将其抽象化。

请参阅connect: Dispatching Actions with mapDispatchToProps上新的React-Redux文档页面，以获取有关如何处理调度动作的完整说明。

Redux-向商店提供提供程序后如何访问商店“调度”？

3 个答案: