react Error in ./src/App.js 'store' is not defined - javascript

attempting to follow this tutorial
https://thinkster.io/tutorials/setting-up-react-redux/introducing-react-redux
App.js file-
import React from 'react';
import { connect } from 'react-redux';
const mapStateToProps = state => ({
appName: state.appName
});
class App extends React.Component {
render() {
const onClick = () => store.dispatch({ type: 'TOGGLE' });
return (
<div>
{ this.props.appName }
</div>
);
}
}
export default connect(mapStateToProps, () => ({}))(App);
according to the video, by importing the connect function and defining mapStateToProps we will get access to store. it does not work.
also, the code in the video is different from the code in the guide.
so at this point i'm not sure if i'm doing something incorrectly, or if this guide is just bad. can anyone suggest a better guide for learning react?
full error message-
Failed to compile.
Error in ./src/App.js
c:\Sites\react_frontend\django-frontend\src\App.js
14:11 warning 'onClick' is assigned a value but never used no-unused-vars
14:27 error 'store' is not defined no-undef
✖ 2 problems (1 error, 1 warning)

This tutorial is not very good - a lot of things are missing.
A previous step had the following line:
const store = createStore(reducer);

I am also using Thinkster and the line below worked for me. I found that there is no need to provide the empty object at all.
export default connect(mapStateToProps)(App);
I agree with you that the react redux tutorial is quite poorly done. I found that the Backend Tutorials(Express and mongo) was a lot more cohesive than the front end. The tutorials linked together well and each one started where the other left off.

Related

React Native Sound Not Working (Remote URL)

Code :
import React, { Component } from 'react'
import { Button } from 'react-native'
import Sound from 'react-native-sound';
class RemoteSound extends Component {
playTrack = () => {
const track = new Sound('https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3', null, (e) => {
if (e) {
alert('error loading track:', e)
} else {
track.play()
}
})
}
render() {
return <Button title="play me" onPress={()=>{
this.playTrack();
}} />
}
}
export default RemoteSound
Problem : when I add this line "import Sound from 'react-native-sound'" ,
I got this error : Cannot read property 'IsAndroid' of undefined
Evaluating react-native-sound.js
and remote url not playing.
Question 1 : this library not used any more react-native-sound
Question 2 : do you have current example in react native . In many websites , I tried many example but all of them is not working.
As stated in the repo home page:
If you encounter this error
undefined is not an object (evaluating 'RNSound.IsAndroid')
know that this is the most common build issue. See #592 and the
several issues linked from it for possible resolution. A pull request
with improved documentation on this would be welcome!
Depending on your environment (operating system, docker, etc) the solution may vary. Please, visit that issue #592 for more details, or add relevant info to the question.

react-localize-redux cannot read property 'map' of undefined

I'm trying to load translations from a JSON file with react-localize-redux and I keep getting this error. This is all fairly new to me so I apologise if it is something obvious. As fair as I can tell from reading documentation this "should" work?
The error message I am receiving:
translate.js
import { combineReducers, createStore } from 'redux'
import { localizeReducer, initialize, addTranslationForLanguage, getTranslate } from 'react-localize-redux'
import translationsEn from '../../../nls/en.json'
const localeStore = createStore(combineReducers({
locale: localizeReducer
}))
const languages = ['en']
localeStore.dispatch(initialize(languages))
localeStore.dispatch(addTranslationForLanguage(translationsEn, 'en'))
export default getTranslate(localeStore.getState().locale)
and in my component:
import translate from '../state/translate/translate'
...
<span className='node-output-schema__title'>{translate('outputSchema.title')}</span>
Any ideas to what might be going wrong?
it seems like you mixed some different frameworks inside here.
The localisation package is called - react-localize-redux.
But inside your error logs I can see that you are using some angular.
Also I just checked the documentation from the react-localize-redux package and it seems like you are working with an outdated version.
For me it should be enough to just provide a Provider to your app and afterwards use the higher order component (import { withLocalize } from "react-localize-redux";
)
Also I would recommend to use this package, which is a lot easier to handle (and indeed I used it for a project myselft)
react-18next (https://github.com/i18next/react-i18next)
this error rases because your property is undefined, so check your error and get the exact line(you can find the error on the console tab of your browser) and check which property used there and check where you filled that property if you didn't fill your property then set it

Debugging why react-native release build crushes and debug one works fine

I was working in Debug mode where everything seemed fine, however when I build my app to TestFlight (i.e. release build) it crashed at LaunchScreen.
After some time and debugging I narrowed issue down to following code
import React from 'react'
import { Subscribe } from 'unstated'
const getStoreAsProps = (storeArr) => {
const storeProps = {}
storeArr.map(value => (storeProps[value.constructor.name] = value))
return storeProps
}
const withStore = (...args) => (Element) => () => (
<Subscribe to={[...args]}>{(...args) => <Element {...getStoreAsProps(args)} />}</Subscribe>
)
export default withStore
The way this works is as follows
import React from "react"
import { Text } from "react-native"
import AuthStore from "./store/Auth"
import RouterStore from "./store/Router"
import withStore from "./store"
class MyComponent extends React.Component {
render() {
const {AuthStore, RouterStore} = this.props
return <Text>{AuthStore.state.username} {RouterStore.state.pathname}</Text>
}
}
export default withStore(AuthStore, RouterStore)(MyComponent)
So essentially withStore is a higher order component that can take in any number of arguments, in this case Stores and pass them to Subscribe component (this is part of state management library I am using called unstaded) which in turn returns render props that are then passed to my component as props.
It works fine in Debug mode, but I get error like this in Release mode
undefined is not an object while evaluating e.state
This error from XCode debug logs.
I think something somewhere during Release build is different compared to Debug one that makes this.props.AuthState for example [undefined] and error is thrown when I am specifying <Text>{AuthStore.state.username} {RouterStore.state.pathname}</Text> where my Store props are undefined, hence I can't access their state.
I'd love to keep this Higher Order Component I made for store, as it enables really nice dev experience, but need to be able to debug what exactly breaks in release build, which thus far I was not able to do.
What optimisations are made during release build that could have effect here?
Answer originates from: https://github.com/facebook/metro/issues/182#issuecomment-398052619
Issue was in accessing value.constructor.name where I was assuming it will always be the same as my Container name. During minification these change, hence it was undefined, adding unique identifier to a class resolves the issue

React native: undefined is not a function (evaluating 'this.props.passwordChanged(text)')

I defined the following actions in ../actions/AuthActions.js:
export const emailChanged = (text) => {..};
export const passwordChanged = (text) => {..};
and exported them in "./index.js" as
export * from './AuthActions';
Imported the actions in LoginForm.js with
import { passwordChanged, emailChanged } from '../actions';
and used the actions in the following way:
onEmailChange(text) {
this.props.emailChanged(text);
}
onPasswordChange(text) {
this.props.passwordChanged(text);
}
On running the code in the emulator, I get the error 'undefined is not a function...', even though I have defined the function, exported the name. One of the exported names 'emailChanged' works as expected but only that one and as far as I can see there is nothing special about that name. I know I must be missing something glaringly obvious, but would appreciate any help.
I assume you are using redux, and trying to call actions from your component. The problem is that you did not connect your action creators with to component with redux's connect Higher Order Component.
What you need to do, is add these actions with connect like this:
import { connect } from 'react-redux';
export default connect(mapStateToProps, { emailChanged, passwordChanged })(LoginScreen)
This way, those actions will be available in this.props.

Errors with clipboard.js in React component?

I’m trying to use clipboard.js in a React component, and it causes my devserver to start failing with the Node error:
ReferenceError: Element is not defined
at Object.<anonymous> (/mnt/home/me/code/board/webapp/node_modules/matches-selector/index.js:6:13)
I initialize the clipboard in componentDidMount but am still getting this error. I actually think the error may have something to do with my import, because even when I don’t actually initialize the clipboard (but include the import) I get the error. Does anyone have an idea what I might be doing wrong?
Relevant code (styling excluded):
import React, { Component } from 'react';
import Clipboard from 'clipboard';
export default class CodeSnippet extends Component {
constructor(props) {
super(props);
}
componentDidMount() {
new Clipboard('.copyButton', {
target: () => document.getElementById('snippet')
});
}
render() {
return (
<div style={styles.snippetCopy}>
<div id="snippet" style={styles.snippet}>
{'this text will copy'}
</div>
<button
className={"copyButton"}
id="clipper"
data-clipboard-text='snippet'
style={styles.buttonStyle}
text={'Copy code'}>
</button>
</div>
);
}
}
You can't require clipboard.js if you're doing server side rendering. It's annoying but instead of installing via npm, they suggest including the script manually like this:
<script src="https://cdn.jsdelivr.net/clipboard.js/1.5.12/clipboard.min.js"></script>
https://github.com/zenorocha/clipboard.js/issues/157
I created a fiddle updating your code. It's a suggestion of integrating clipboardjs and React, using ref's and clipboardjs' text function.
Check here: https://jsfiddle.net/mrlew/L54ky6hj/

Categories