CODEWITHSUNDEEP
reactjsreduxreact-redux
ryan
ryan

Reputation: 6655

Connected container components further down the tree?

Currently I have a single container at the top level and state is passed via props down the tree. This is quickly becoming cumbersome and I want to have multiple container components as needed. When I try this it seems they aren't connected to the top level redux store.

Example:

App.tsx

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

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

Further down the tree from PageContainer I want to have EditorContainer.tsx work

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> {
  ...
}

The problem is that when I try to use showModal I get TypeError: dispatch is not a function from:

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

Do I have to do more than use <EditorContainer />? I shouldn't be using another <Provider>, right? I've had a hard time finding any examples of multiple redux-connected containers throughout an application.

Help appreciated

Upvotes: 1

Views: 54

Answers (2)

markerikson
markerikson

Reputation: 67469

Two additional observations.

First, we encourage the use of multiple connected components in your app. See the Redux FAQ entry on connecting multiple components.

Second, connect supports an "object shorthand" for dispatching action creators - just pass an object full of action creators as the second argument, instead of a separate mapDispatch function. So, in your case, it could be:

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

Upvotes: 0

Filipe
Filipe

Reputation: 884

mapDispatchToProps is the second argument for connect, the first being mapStateToProps. Try changing it to

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

If you don't need a mapStateToProps

Upvotes: 2

Related Questions