React-intl, Redux-Form combine and raise warnings - javascript

I try to use React and Redux for now. and I'm now making i18n App so I have to use React-intl package in this project.
Now My login form is like this. and import is like below.
import React, {
Component
} from 'react';
import {
reduxForm
} from 'redux-form';
import {
injectIntl
} from 'react-intl';
now, I would like to use intl.formatMessage so I have to use injectIntl into this Component like
export default injectIntl(LoginForm);
and now I don't get any errors.
Also, I would like to use Redux-form into my login name form and e-mail form in it. like
export default reduxForm({
form: 'loginForm',
fields: ['name', 'password']
})(LoginForm);
I need the both, so I combine them into 1 export, like
export default reduxForm({
form: 'entrance',
fields: ['name', 'password']
})(injectIntl(LoginForm));
or
export default injectIntl(reduxForm({
form: 'entrance',
fields: ['name', 'password']
})(LoginForm));
But both type of above I've got a warning
warning.js:44Warning: Unknown props `initialValue`, `autofill`, `onUpdate`, `valid`, `invalid`, `dirty`, `pristine`, `active`, `touched`, `visited`, `autofilled` on <input> tag. Remove these props from the element. For details, see "abbred"
in input (created by TextField)
in div (created by TextField)
in TextField (created by Entrance)
in div (created by CardText)
...
I can use both of them with this warning, but how do I would like to get rid of this warning.
How should I do?

You will need to update Redux-Form to v6 to overcome these errors (assuming you're running React v15.2.0+). Run:
npm install --save redux-form#6.0.0-rc.3
You will also need to change how you're using Redux-Form due to major changes in its infrastructure. Take a look at the documentation here:
http://redux-form.com/6.0.0-rc.3/docs/MigrationGuide.md/
Also, this tutorial has code samples that demonstrate how a Redux-Form v6 setup should look: http://davidmeents.com/create-redux-form-validation-initialized-values/

Related

Component Palette Custom Hook

I am fairly new to React and still wrapping my head around custom-hooks. I cam across a code where a custom hook was created to handle the component imports.
useComponentPalette.js
import {TodoEditor} from './components/TodoEditor'
import {TodoItem} from './components/TodoItem'
import {TodoList} from './components/TodoList'
import {CheckBox} from './components/CheckBox'
const defaultComponents = {
TodoEditor,
TodoItem,
TodoList,
CheckBox
}
export function useComponentPalette(){
return defaultComponents
}
And then in order to use the hook,
const {TodoItem, TodoList, Checkbox } = useComponentPalette()
My Question :- Does this approach provides any advantage over the regular imports in the component ? or this is an anti-pattern ?
How I usually import the components is as follows
import {TodoEditor} from './components/TodoEditor'
import {TodoItem} from './components/TodoItem'
import {TodoList} from './components/TodoList'
import {CheckBox} from './components/CheckBox'
function App(){
return(
<>
<TodoList/>
</>
)
}
It's not a good idea to use react hooks like this you can get the same result without react hook
// first file name.js
import {TodoEditor} from './components/TodoEditor'
import {TodoItem} from './components/TodoItem'
import {TodoList} from './components/TodoList'
import {CheckBox} from './components/CheckBox'
export default {
TodoEditor,
TodoItem,
TodoList,
CheckBox
}
//component file
import * as Component form 'first file name';
//<Component.TodoEditor/>
//or
import {TodoEditor} form 'first file name';
The way that I use react-hooks is for making my code more dry and increase it's readability, so react-hooks is not good fit for this kind of usage.
Hi #Sachin,
In my option, React JS use hook to manage reuse stateful logic between components. In other word, Hooks do well to encapsulating state and share logic. If you want to do some stateful logic or condition base logic with these components, then it's fine with that. But if you are using just without condition in the given components. Then, This Is useless for making the custom hook. You can do that without a custom hook in a simpler way.
Here is a simple way to do that:-
In components folder. I create index file, this is the entry point of all my exporting components
In that file. I export all my components, as you can see.
I use that components like this. It much better way. In my option.
import { Header, Footer, Sider } from "./components"
before using react custom hooks, we should be aware of the rationale behind it.
Customs hooks functionality was provided to reuse stateful logic. If logic doesn't require any state, we will use simple functions and if it is about components only there there are different patterns for making code general and scaleable.
So, there is no usage of custom hook in above case at all. For me, I would go with the following code for above scenario:
// components/index.tsx
import {Todo} from './todo'
import {CheckBox} from './components/CheckBox'
export {
Todo,
CheckBox
}
// componentns/todo/index.tsx
import {Editor} from './Editor'
import {Item} from './Item'
import {List} from './List'
const Todo = {
Editor,
Item,
List
}
export default Todo;
and usage will be like
import { Checkbox, Todo } from "components"
...
<Checkbox ... />
<Todo.List ...>
<Todo.Item ... >
</Todo.Editor ... />
</Todo.Item ... >
</Todo.List>
...
P.S Usage can be different based upon the logic of components, just giving an hint how we can patterns to serve our purpose.
Hope it helps.

Unexpected keys, "length", "action", "location" etc in Redux when using connectedRouter

I am trying to write a React app and I am trying to use ConnectedRouter:
https://github.com/supasate/connected-react-router
It's a Redux binding for React Router.
I am getting the following error:
Now I think this is probably related to this question's accepted answer:
Redux: Unexpected key found in preloadedState argument passed to createStore
However unlike there when trying to pass default, I actually probably want these in my combine reducer.
Here's my current code in my reducers/index.js:
export default history =>
combineReducers({
router: connectRouter(history),
search,
profile,
color,
categories,
coordinates: LocationReducer,
idprovider,
firstFavorite,
analytics,
sidebar,
messages,
total_messages,
onesignal,
tokens
});
And in my store.js:
import createRootReducer from "./reducers/index";
I'm not quite sure what the correct solution is here, as ConnectedRouter doesn't seem to do anything with these values.
What is the correct solution?
EDIT: In my example bellow I used syntax used in connected-react-router v4, but my example was definitely wroking.
There was an update in usage for v5/v6, if you are using version>=5, try to migrate my example into it:
https://github.com/supasate/connected-react-router/blob/master/FAQ.md#how-to-migrate-from-v4-to-v5v6
You probably do not intialize the store correctly.
Try this:
reducers/index.js
export default combineReducers({
// router reducer will be added automatically by connectRouter in store.js
search,
profile,
color,
categories,
coordinates: LocationReducer,
idprovider,
firstFavorite,
analytics,
sidebar,
messages,
total_messages,
onesignal,
tokens
});
store.js
import {connectRouter, routerMiddleware} from 'connected-react-router';
import {createBrowserHistory} from 'history';
import reducers from './reducers';
const history = createBrowserHistory(history);
const store = createStore(
connectRouter(history)(reducers),
applyMiddleware(routerMiddleware(history))
);

React - Difference between two statements with reduxForm

I have checked sample code of reduxForm with initialized value, the only difference between their code and my code is the following chunk of code..
My Code (Doesn't work with initialValues)
function mapStateToProps(state) {
return{
initialValues: state.account.data
};
}
export default reduxForm({
form:'initializeFromState'
})(connect(mapStateToProps,{load: loadAccount})(InitializeFromStateForm));
Their code (Works with InitialValues) Taken from here
InitializeFromStateForm = reduxForm({
form: 'initializeFromState', // a unique identifier for this form
})(InitializeFromStateForm);
// You have to connect() to any reducers that you wish to connect to yourself
InitializeFromStateForm = connect(
state => ({
initialValues: state.account.data, // pull initial values from account reducer
}),
{ load: loadAccount }, // bind account loading action creator
)(InitializeFromStateForm);
export default InitializeFromStateForm;
I changed their code for connect() and reduxForm with mine, interestingly the initialValues stopped working, now my question is are both the code different? if different what is wrong in my code?
Thanks.
Yeah there is a slight difference, you are wrapping the component with connect and then with ReduxForm, However it should be the other way round
Change your code to
export default connect(mapStateToProps,{load: loadAccount})(reduxForm({
form:'initializeFromState'
})(InitializeFromStateForm));
and it should work
The difference is in the order in which the react-redux connect HoC, and the redux-form HoC wrap each other.
In your code redux-form wraps the connect HoC, and the initialValues are not passed to the form, but to the internal component. The form is initialized with the values, and the internal component (yours) ignores them.
Props flow: redux-form -> connect - initialValues -> component
In their code connect wraps redux-form, and the initialValues are passed as to the redux-form HoC (the form). The form is initialized with the values.
Props flow: connect - initialValues -> redux-form -> component

React Native Error: Element Type is Invalid

I need some help looking for where to start with this error I'm getting. Nimbus is the name of my app but I'm not sure what it means when it says check the render method of 'Nimbus'. Which render method? I have a functional component at app/index.js called Nimbus but obviously that doesn't render anything just returns a component.
I've checked similar error messages for RN on here and most people are just forgetting to export a component properly but I've checked my components and all are being exported correctly from what I can tell. The repo is below if you want to take a look at my project structure, etc. There are only a few files right now. Sorry I can't provide more information that's all I've got right now.
https://github.com/MaxwellGover/Nimbus
Because the AppContainer is a default export:
export default class AppContainer ...
And you proxy it from the containers/index.js like this:
export { AppContainer } from './App/AppContainer'
This tries to import a named export called AppContainer. Instead, you'll need to import the default export explicitly:
export { default as AppContainer } from './App/AppContainer'
in your index.js you need to import component.
change following.
import { NimbusNavigator } from './Navigator/NimbusNavigator'
import { SplashContainer } from './Splash/SplashContainer'
import { AppContainer } from './App/AppContainer'

Extend vue.js component from third-party library

I'm using component ElDatepicker from element-ui and I want to change it's template and event handler method.
I'm trying to do something like this in single file component:
import Vue from 'vue';
import ElDatePicker from 'element-datepicker'
Vue.use(ElDatePicker)
var dpkr = Vue.component('ElDatePicker')
console.log(dpkr)
export default {
extends: ['ElDatePicker']
}
But it doesn't work. How i can change it?
https://github.com/ElemeFE/element/tree/dev/packages/date-picker - component package
Your main problem is that extends should specify a single component and not an array. You should reference the component and not the name.
import Vue from 'vue';
import ElDatePicker from 'element-datepicker'
export default {
extends: ElDatePicker
}
The repo you posted is from element-ui
Do npm install element-ui
Then:
import { DatePicker } from 'element-ui'
export default {
// Use mixins for array syntax
mixins: [DatePicker]
// OR use extends without array
extends: DatePicker
}
You have to first install Element UI in your project using npm install element-ui.
Then you have to edit your main.ts/main.js file and add
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
This should solve your problem. For more help, check Element UI

Categories