Root state of redux/react-native app undefined - javascript

When I add this line: import { makePages } from './pages'
I get the error:
Cannot read property 'product' of undefined
pages/index.js
export * from './add'
export { makePages } from './model'
export * from './reducer'
pages/model.js
import type { RecordFactory, RecordOf } from 'immutable'
import { Record } from 'immutable'
export const makePages: RecordFactory<any> = Record({
height: 5
})
export type Pages = RecordOf<any>
I'm not even using makePages in the file and it gets the error.
product/model.js
import type { RecordFactory, RecordOf } from 'immutable'
import { Record } from 'immutable'
import { makePages } from './pages'
const makeProduct: RecordFactory<any> = Record({
pages: 3
})
let product = new makeProduct()
export { product }
Why does import { makePages } from './pages' cause the error?

Actually when I delete export * from './add' the error does not occur so I just need to make sure I'm exporting correctly. Possibly should export everything individually rather than all *

Related

React Redux -> Map is not a function?

So I am learning how to use redux and redux persist and currently I stuck at a problem right now. Whenever I try to map my store's content, it throws an error saying TypeError: tasks.map is not a function and I don't really know why the problem is occuring. I've googled around and tried debugging it, also tried to re-write the code a couple of time but it was all to no avail. Here's my entire code:
rootReducer.js
import React from 'react'
let nextToDo = 0;
const task=[
{
}
]
const reducer =(state=task, action)=>
{
switch(action.type)
{
case 'add':
return[
...state,
{
name: 'new',
id: nextToDo+=1
}
]
default:
return state;
}
}
export default reducer
store.js
import reducer from './rootReducer'
import {applyMiddleware,createStore} from 'redux'
import logger from 'redux-logger'
import {persistStore, persistReducer} from 'redux-persist'
import storage from 'redux-persist/lib/storage'
const persistConfig ={
key: 'root',
storage
}
export const persistedReducer = persistReducer(persistConfig, reducer)
export const store = createStore(persistedReducer, applyMiddleware(logger));
export const persistor = persistStore(store);
export default {store, persistor}
Index.js:
import React, {Component} from 'react'
import {createStore} from 'redux'
import reducer from './rootReducer'
import 'bootstrap/dist/css/bootstrap.min.css'
import {Button} from 'react-bootstrap'
import {store} from './store'
import {connect} from 'react-redux'
class Index extends Component {
render(){
const {tasks} = this.props
const add=()=>
{
store.dispatch(
{
type: 'add',
}
)
}
store.subscribe(()=>console.log('your store is now', store.getState()))
return (
<div>
{tasks.map(task=><div>{task.name}</div>)}
<Button onClick={()=>add()}></Button>
</div>
)
}
}
const mapStateToProps=(state)=>
{
return{
tasks: state
}
}
export default connect(mapStateToProps)(Index)
Try to declare state this way:
state = {
tasks: [{}]
}
Then, on Index.js, you can pass it to props by doing this:
const mapStateToProps=(state)=>
{
return {
tasks: state.tasks
}
}
And use it inside the Component with props.tasks

ReferenceError: variable is not defined when importing from another module

index.js
import React from 'react'
import { master, setMaster } from './variableTest'
export default Home () {
[signedIn, setSignedIn] = React.useState(false)
[master, setMaster] = React.useState([])
return (<>...</>)
}
variableTest.js
var master, setMaster
export default master
export { master, setMaster }
Now, signedIn is [], but master and setMaster is still undefined.
I added ; to the end of [signedIn, setSignedIn] = React.useState(false):
index.js
import React from 'react'
import { master, setMaster } from './variableTest'
export default Home () {
[signedIn, setSignedIn] = React.useState(false);
[master, setMaster] = React.useState([])
return (<>...</>)
}
And a error occured: master is not defined.
I want to give master and setMaster a new value when Home() built.

module export - Getting property 'default' of undefined in React Native

Facing problem with importing and exporting files. This was working with react-native 0.51.0
But not in react-native: 0.56
"babel-eslint": "7.2.3",
"babel-plugin-transform-remove-console": "6.9.0",
"babel-preset-react-native": "^5",
Is it a problem with module.exports and export default or with babel version?
Getting error saying that
Cannot read property 'default' of undefined
Object.get [as API]
repolib/index.js
import * as components from './components';
import * as utils from './utils';
var Utils = {
Logger: utils.Logger,
Toast: utils.Toast
}
var Components = {
Button: components.Button
}
module.exports = {
Utils,
Components,
}
Utils/Toast.js
var Toast = require('../repolib').Utils.Toast;
export default {
...(Toast)
}
API/loginAPI.js
import Toast from '../Utils/Toast';
export default {
login: () => {...}
}
API/index.js
import loginAPI from './loginAPI';
export default {
loginAPI
}
common/index.js
export { default as API } from '../API';

React: Using a redux export connect from other components

I'm writing a mobile app with React Native. I have two js files as following:
Error.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getTranslate } from 'react-localize-redux';
function mapStateToProps(state) {
return {
t: getTranslate(state.locale)
};
}
export default connect(
mapStateToProps
)(
({ t }) => ({
e001: t('wrong_format'),
e002: t('invalid_email'),
})
);
SignIn.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { getTranslate } from 'react-localize-redux';
import { Field, reduxForm } from 'redux-form';
import Error from './Error';
const validate = (values) => {
console.log('error: ', Error);
// Process validate redux-form with messages from Error.js
};
class SignIn extends Component {
// Process login form with redux-form
}
function mapStateToProps(state) {
return {
t: getTranslate(state.locale),
};
}
const SignInForm = {
form: 'SignIn',
validate,
};
export default connect(
mapStateToProps
)(
reduxForm(SignInForm)(
SignIn
)
);
How can I use the data that exported from Error.js in SignIn.js? (e.g. values of 'e001', 'e002')
Example from validate function (in SignIn.js) I wanna show the value of code "e001" from Error.js.
For more detail, my idea is collect all error messages from language file (using react-localize-redux) into Error.js, then from validate functions of redux-form, i can show those messages easier.
Its look like you want Error.js as a helper file.But you are implemented it as react-redux container.
If you implementing it as react-redux container then necessarily it will call every time whenever store will change.
Instead simply export it.
import { getTranslate } from 'react-localize-redux';
const format = ({
e001: getTranslate('wrong_format'),
e002: getTranslate('invalid_email'),
})
export default format;
Called it as once imported
console.log(format.e001);

Argument of type 'typeof C:/Users/pfftd/projectcrystal/src/actions/crystalActions' is not assignable to parameter of type 'ActionCreatorsMapObject')

Been trying to figure this out for the past 2-3 hours.
The app starts from running on the browser and displays the error that this.props.fetchAPOD is not a function (screenshots at the far bottom) but it clearly is in my action creator. Also in my container it says the error that "Argument of type 'typeof "C:/Users/pfftd/projectcrystal/src/actions/crystalActions"' is not assignable to parameter of type 'ActionCreatorsMapObject' when I assign the actions to mapDisPatchToProps (which is the same EXACT code I see in Microsoft's react/typescript start-kit guide: https://github.com/Microsoft/TypeScript-React-Starter
Here is my code:
container Crystal.tsx
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Crystal from '../components/Crystal';
import * as actions from '../actions/crystalActions';
import {
ApodSTATE
} from '../types';
export function mapStateToProps({ APOD }: ApodSTATE ) {
return {
APOD
};
}
export function mapDispatchToProps( dispatch: any ) {
return bindActionCreators( actions, dispatch );
}
export default connect( mapStateToProps, mapDispatchToProps )( Crystal );
App.tsx (file that contains the store and the provider)
import * as React from 'react';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { createLogger } from 'redux-logger';
import allReducers from './reducers';
import Crystal from './components/Crystal';
// import { ApodSTATE } from './types';
const logger = createLogger({
level: 'info',
collapsed: true
});
const store: any = createStore(allReducers, applyMiddleware(thunk, logger));
class App extends React.Component<any, any> {
render() {
return (
<Provider store={store}>
<Crystal />
</Provider>
);
}
}
export default App;
crystalActions.tsx
export const FETCH_APOD = 'FETCH_APOD';
export type FETCH_APOD = typeof FETCH_APOD;
export interface FetchApod { type: FETCH_APOD };
export const fetchAPOD = () => {
return ( dispatch: any ) => {
dispatch({
type: FETCH_APOD
});
};
};
types (index.tsx)
export interface TableName {
TableName: string;
}
export interface ApodACTIONS {
type: string;
fetchAPOD?: () => {};
};
export interface ApodSTATE {
APOD: {};
}
export enum actionTypes {
FETCH_APOD
}
component Crystal.tsx
import * as React from 'react';
// import { ApodSTATE } from '../types';
class Crystal extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.printTest = this.printTest.bind(this);
}
componentDidMount() {
this.printTest();
this.props.fetchAPOD();
}
printTest() {
setTimeout(() => {
console.log(this.props);
}, 1500);
}
render() {
return (
<div>
<h2>Project Crystal initiation</h2>
<h3>Test</h3>
</div>
);
}
}
export default Crystal;
Screenshots of a closer look:
Are you importing the right component? In App.tsx you have
import Crystal from './components/Crystal';
Should it not be
import Crystal from './containers/Crystal';
It looks like you aren't using the container component and are instead using the presentational one

Categories