React Error #321 when connecting Redux to React

Hello,

I am working on a program that allows the users to create and remove boxes with React Redux.

It has a Presentational component which will be used to control the rest of the app.

The issue now becomes connecting the react to redux:

let store = createStore(reducer, {});
let Container = ReactRedux.connect(mapDispatch)(Presentational);
class AppWrapper extends React.Component {
  constructor(props) {
    super(props)
    console.log("AppWrapper Called")
  }
  render() {
    return(
     <Provider store={store}>
        <Container/>
      </Provider>
    )
  }
}
console.log(<AppWrapper/>)
ReactDOM.render(<AppWrapper/>, document.getElementById('root'));

When I try to connect my React and Redux store, I get a #321

Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

This one. You’re importing React twice: once in Codepen’s JS settings and second time in the code itself.

EDIT: Also looking at your reducer - you shouldn’t be mutating state.

1 Like

Thank you, I am new to React/Redux and this is my first attempt at making a program with it outside of fcc.

let Container = ReactRedux.connect(mapDispatch)(Presentational);

connect returns a type error undefined despite importing it?

You have two places where you import react-redux.
Also if you look at the source code of react-redux you’ll see that there is no default export: react-redux/exports.ts at master · reduxjs/react-redux · GitHub

1 Like