Question

目前，我在顶层只有一个容器，状态通过props传递到树下。这很快变得很麻烦，我希望根据需要具有多个容器组件。当我尝试此操作时，似乎它们没有连接到顶级Redux存储。

示例：

App.tsx

import * as React from 'react';
import { Provider } from 'react-redux';
import { store } from './reduxStore';

<Provider store={store}>
  <PageContainer />
</Provider>

在PageContainer的树下，我想让EditorContainer.tsx工作

import { connect } from 'react-redux';
import { codeBooksAction, CodeBooksModalOptions } from '../../../actions/codeBooks';
import { Editor } from './Editor';

const mapDispatchToProps = (dispatch) => ({
  showModal: (opts: CodeBooksModalOptions) => dispatch(codeBooksAction(opts)),
});

export const EditorContainer = connect(
  mapDispatchToProps,
)(Editor);

Editor.tsx

export interface EditorProps {
  showModal: (opts: CodeBooksModalOptions) => void;
}

export class Editor extends React.Component<EditorProps, EditorState> {
  ...
}

问题在于，当我尝试使用showModal时，我会从TypeError: dispatch is not a function那里得到

：

const mapDispatchToProps = (dispatch) => ({
  showModal: (opts: CodeBooksModalOptions) => dispatch(codeBooksAction(opts)),
});

除了使用<EditorContainer />，我还需要做更多的事情吗？我不应该再使用其他<Provider>，对吗？我很难找到整个应用程序中多个通过Redux连接的容器的示例。

感谢帮助

Answer 1

App = { begin: function () { initialize(); $('.formSubmit').submit(function(e){ e.preventDefault(); console.log('in'); }); }, } function initialize() { var row = $('#row'); var template = $('.template'); for (var i = 1; i <= 5; i++) { template.find('#price').val(i); row.append(template.html()); } } window.addEventListener('load', function () { App.begin(); })是<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <body> <div class="template" style="display: none;"> <form class="formSubmit"> <input type="hidden" id="price" /> <button type="submit">submit</button> </form> </div> <div id="row"></div> </body>的第二个参数，第一个是mapDispatchToProps。尝试将其更改为

connect

如果您不需要mapStateToProps

Answer 2

另外两个观察结果。

首先，我们鼓励您在应用中使用多个连接的组件。参见Redux FAQ entry on connecting multiple components。

第二，connect支持用于调度动作创建者的“对象简写”-只需传递一个充满动作创建者的对象作为第二个参数，而不是单独的mapDispatch函数。因此，在您的情况下，可能是：

const mapDispatch = {showModal: codeBooksAction};
export const EditorContainer = connect(null, mapDispatch)(Editor)

连接的容器组件在树的下方吗？

2 个答案: