Starting with redux

1

Hi all :slight_smile:

So I took the react course here , and now I’m at redux.
I managed before to run react code in a jsx-fiddle , but have had no luck so far ?
I’m getting a ‘redux.createStore is not a function’ error?

here is my code :

class Redux extends React.Component  {
  constructor(props){
     super(props)
  }
  
  render() {
    const reducer = (state = 5) => {
        return state;
    }
    const store =Redux.createStore(reducer);
    return (
       <div>
         
       </div>
    );
  }
}

Thanks !

2

@agate hey,

have you added redux to the dependencies? actually its called resources on fiddle

2020-08-03
2020-08-03208×552 5.78 KB

3

Thanks for that tip :slight_smile: I managed to add two links to the redux cdnjs in the resources link , from this site: https://cdnjs.com/libraries/redux

but still the same error ?

4

@agate can you share the fiddle? also you dont have to get the cdn from external site you can just type redux in fiddle and click add

5

Yes, here is the link :slight_smile:

https://jsfiddle.net/hj1kcux9/

6

@agate hey,

It seams to work when changing the component to App…

class App extends React.Component  {
  constructor(props){
     super(props)
  }
  
  render() {
    const reducer = (state = 5) => {
        return state;
    }
    const store = Redux.createStore(reducer);
    return (
       <div>
         
       </div>
    );
  }
}

ReactDOM.render(
  <App/>,
  document.getElementById('container')
);
1 Like
7

There isn’t a function called Redux.createStore: you have called your class Redux, so when you try to run createStore, it recursively calls your class and looks for a createStore static method, which does not exist.

If you call your functions/classes the same names as the library you’re trying to use, things will not work as expected.

3 Likes
8

Yes, that was clumsy of me , I know not to use keywords etc for variable/class naming ,facepalm emoj needed :slight_smile:

1 Like
9

It’s easy done. There’s a more fundamental issue here though, the store doesn’t go in a component, you set it up outside the components then use the react-redux libabry to hook it into them

10

I placed the store outside of the class , right above the class, it works too so that should be correct? Or should these lines be in another function or class?
So I have this now:

const reducer = (state = 5) => {
        return state;
}
const store =Redux.createStore(reducer);
class App extends React.Component  {
  constructor(props){
     super(props)
  }
  render() {
    return (
       <div>
       </div>
    );
  }
}
ReactDOM.render(<App/>,document.getElementById('container'));

I’m not sure what you mean by using the react-redux library to hook it into them?

I’m very new to react/redux , especially redux :slight_smile:

11

Yeah it takes a little while grok. It doesn’t make any sense to do it like that: basically the store needs to be available everywhere in the app, putting it within a component that isn’t the <Provider> that react-redux provides means a. Atm it’s only available to that component, which defeats the point and b. if you manually passed down the dispatch function to every child to get around a, you’d also have to hook up the listeners on every single component you passed it to (this being what react-redux does).