Next.js: Template component can't be connected with Redux anymore?

[kunokdev]

I am getting error

Could not find "store" in either the context or props of "Connect(Base)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(Base)".

while connecting template component with redux. This seems like it worked in previous version.

• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

Template component connects to Redux successfully.

Current Behavior

Getting error: Could not find "store" in either the context or props of "Connect(Base)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(Base)".

If I wrap root component with <Provider> from 'react-redux`, it throws error that it expects object, not a function.

Steps to Reproduce (for bugs)

store.js

const initStore = (initialState = {}) => {
  createStore(
    combineReducers({ someReducer, otherReducer }),
    initialState,
    composeWithDevTools(
      applyMiddleware(thunkMiddleware),
    ))
}

template.js

class Base extends React.Component {
...
render(){
    return (
      <div>
        {this.props.children}
      </div>
    )
  }
}
...
export default withRedux(Store, mapStateToProps, mapDispatchToProps)(Base)

./pages/index.js

import Template from 'Templates/Base'

export default class Index extends React.Component {
  render(){
    return (
      <Template>
        {'index'}
      </Template>
    )
  }
}

Context

I am wrapping all pages in template component which includes methods and components that are reused among all pages.

Your Environment

| Tech | Version |
|---------|---------|
| next | "^3.0.1-beta.20" |
| node | 6.10.2 |
| OS | Ubuntu/Linux |
| browser | Chrome 60 |

[lfades]

Check the example with-redux

If the error persists, share a repo, thanks.

[kunokdev]

@Goluis Hi, link is broken.

I already followed this example. I wrap pages using withRedux but I also want to connect my Template (which is wrapper for all pages, a place where I put all shared/reused code for all pages) and this is where problem appears.

[lfades]

I may see what's your problem, try to always use withRedux as the main HOC for your component in /pages, so instead of using it in template.js use it in ./pages/index.js

[hugotox]

withRedux must be used in pages, for all other components including the template you must use connect from react redux
See the relevant example: https://github.com/zeit/next.js/blob/v3-beta/examples/with-redux/components/Page.js

[timneutkens]

Thanks @hugotox ❤️