I am having trouble creating this shared component in my project.
This is simplified version of its code:
import React from 'react';
import { View } from 'react-native';
import { connect } from 'react-redux';
function mapStateToProps(state) {
return {
platform: state.device.get('platform') //defines if iOS or Android
};
}
export function SharedView({ theme, ...props }) {
return <View {...props}>{theme}</View>;
}
export default SharedView(
connect(mapStateToProps, null)
);
As I try to add console.log or alert inside of my mapStateToProps I get nothing and it seems I can not see it from my SharedView. I know I could rewrite it to class SharedView extends Component { ..., but for certain reasons I need to keep the format.
Any ideas how to get this global state value?
connect is a higher order function - your component is supposed to be wrapped in it not the other way around.
export default connect(mapStateToProps)(SharedView);
Related
I hope I can make sense of all of this in question format. I have been trying to work my way through this was the past 7 or so hours without success. My brain has simply run dry at this point and I am at a dead end regardless.
I am working with react 15.6.1, redux 3.7.1, react-redux 5.0.5, redux-immutable 4.0.0, redux-form 7.2.0, react-select 1.2.1.
My application has search functionality with field A and field B using 2 different forms (different forms for different pages). I don't it is pivotal to this question but I am using redux-form and react-select for the forms and search fields. I am storing user-entered search criteria in my Search reducer to synchronise autopopulation etc of select lists across the different forms.
redux-form---->react-select(field A)
---->react-select(field B)
My Search reducer is using Immutable.fromJs() in the initialState(). The reducer is working as expected. The problem I have is where to use the HOC in order to convert the Map object returned from the reducer into the JS array required for the react-select component.
MainSearchForm.js: -
import React, {Component} from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'
import FormFieldA from './FormFieldA'
import FormFieldB from './FormFieldB'
class MainSearchForm extends Component {
render() {
return(
<form>
<FormFieldA options={this.props.fieldAoptions}/>
<FormFieldB options={this.props.fieldBoptions}/>
</form>
)
}
}
function mapStateToProps ({Search}, props) {
return {
fieldAoptions: Search.get('fieldAoptions'),
fieldBoptions: Search.get('fieldBoptions'),
}
}
MainSearchForm = connect(mapStateToProps,{})(MainSearchForm);
export default reduxForm({
form: 'main-search',
})(MainSearchForm)
To simply the example, both FormFieldA and FormFieldB components follow as the same: -
import React, {Component} from 'react'
import Select from 'react-select';
class FormFieldA extends Component {
render() {
const handleOnChange = (value) => {
// call dispatch here
}
return(
<Select
name="field-a-input"
id="field-a"
options={this.props.options}
onChange={handleOnChange}
/>
)
}
}
export default FormFieldA
So the options prop in the react-select component must be a JS array: -
options: [
{ label: 'Red' },
{ label: 'Green' },
{ label: 'Blue' }
]
I can convert this using Immutable.toJS() but the Redux official guide recommends against this for performance reasons, recommending this pattern using an (I assume reusable) HOC component to parse the Immutable Map to the JS array.
My question is, how would I incorporate this? As you can see in the code above, right now my MainSearchForm is connecting to the Redux store to retrieve the options data required as options for the react-select options props. Would the answer be to just not have MainSearchForm and instead have a intermediary component for each field rendered by MainSearchForm, with this intermediary component call the HOC before using connect, as is seen in the guide: -
HOC from the Redux Immutable guide: -
import React from 'react'
import { Iterable } from 'immutable'
export const toJS = WrappedComponent => wrappedComponentProps => {
const KEY = 0
const VALUE = 1
const propsJS = Object.entries(
wrappedComponentProps
).reduce((newProps, wrappedComponentProp) => {
newProps[wrappedComponentProp[KEY]] = Iterable.isIterable(
wrappedComponentProp[VALUE]
)
? wrappedComponentProp[VALUE].toJS()
: wrappedComponentProp[VALUE]
return newProps
}, {})
return <WrappedComponent {...propsJS} />
}
Example intermediary smart component to parse the Immutable Map through the HOC and connect() with FormFieldA: -
import { connect } from 'react-redux'
import { toJS } from './to-js'
import FormFieldA from './FormFieldA'
function mapStateToProps ({Search}, props) {
return {
fieldAoptions: Search.get('fieldAoptions'),
}
}
export default connect(mapStateToProps)(toJS(FormFieldA))
Would that be best practice?
I would sincerely appreciate any help with this. This is my first time working with HOC & Immutable and it's a lot to take in. But I think I have finally got a grasp of the paradigm.
Don't worry too much about best practises, the best practises of today are the anti patterns of tomorrow. Don't get me wrong is good to know what's the "best" way doing things, but the best is always relative so take that into consideration.
The idea is that your FormFieldA and FormFieldB shouldn't care about redux, immutable, foobar, bajouras, wtvLibraryOrToolThatMightCome.
So your HOC, for the immutable should be in, your MainSearchForm:
import React, {Component} from 'react'
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'
import { toJS } from './to-js'
import FormFieldA from './FormFieldA'
import FormFieldB from './FormFieldB'
class MainSearchForm extends Component {
render() {
return(
<form>
<FormFieldA options={this.props.fieldAoptions}/>
<FormFieldB options={this.props.fieldBoptions}/>
</form>
)
}
}
function mapStateToProps ({Search}, props) {
return {
fieldAoptions: Search.get('fieldAoptions'),
fieldBoptions: Search.get('fieldBoptions'),
}
}
MainSearchForm = connect(mapStateToProps,{})(toJS(MainSearchForm));
export default reduxForm({
form: 'main-search',
})(MainSearchForm)
Leave your FormFieldA and FormFieldB as they are, very dumb and just waiting for a simple array of options.
This is just a personal taste, but I usually even separate the component from the redux stuff.
For example with your case I would have MainSearchForm and a MainSearchFormContainer
import React, {Component} from 'react'
import FormFieldA from './FormFieldA'
import FormFieldB from './FormFieldB'
class MainSearchForm extends Component {
render() {
return(
<form>
<FormFieldA options={this.props.fieldAoptions}/>
<FormFieldB options={this.props.fieldBoptions}/>
</form>
)
}
}
export default MainSearchForm
And the container:
import { Field, reduxForm } from 'redux-form'
import { connect } from 'react-redux'
import MainSearchForm from './MainSearchForm'
import { toJS } from './to-js'
function mapStateToProps ({Search}, props) {
return {
fieldAoptions: Search.get('fieldAoptions'),
fieldBoptions: Search.get('fieldBoptions'),
}
}
const MainSearchFormContainer = connect(mapStateToProps,{})(toJS(MainSearchForm));
export default reduxForm({
form: 'main-search',
})(MainSearchFormContainer)
I'm trying to learn some redux. Component I'm working on is a simble <div> based button that - when clicked - passes value as a parameter to the dispatch, so it can be displayed later someplace else.
After following both documentation and tutorials over the web I came up with the following code:
main app container
import React, { Component } from 'react'
import { Provider } from 'react-redux'
import configureStore from './../store/configureStore.js'
import Input from './input.js'
let store = configureStore()
export default class App extends Component {
render() {
return (
<Provider store={store}>
<Input />
</Provider>
)
}
}
button container
import React, { Component } from 'react'
import { connect } from 'react-redux'
import printOut from './../actions/actions.js'
import InputComponent from './../components/inputComponent.js'
import PropTypes from 'prop-types'
const mapDispatchToProps = (dispatch) => {
return {
onClick: (input) => dispatch(printOut(input))
}
}
const Input = connect(mapDispatchToProps)(InputComponent)
export default Input
button component
import React, { Component } from 'react'
import PropTypes from 'prop-types'
class Input extends Component {
render() {
return (
<div style={style} onClick={this.props.onClick('lala')}>Button!</div>
)
}
}
Input.PropTypes = {
onClick: PropTypes.func.isRequired
}
const style = {
height: 30,
width: 100,
backgroundColor: '#ff4068'
}
export default Input
Application breaks. I got this from the console:
Uncaught TypeError: (0 , _actions2.default) is not a function
at Object.onClick (index.js:33683)
at Input.render (index.js:33743)
(...)
index.js:22443 The above error occurred in the <Input> component:
in Input (created by Connect(Input))
in Connect(Input) (created by App)
in Provider (created by App)
in App
From what little I understood, there are some issues with button component and the way I'm trying to pass the param to props. So I tried to change it a little and added a function to handle that before render.
...
onClick(input) {
return this.props.onClick(input)
}
render() {
return (
<div style={style} onClick={onClick('lala')}>Button!</div>
)
}
...
The error I get this time is onClick is not defined. Oh, ok. I forgot this keyword before calling this new function. So I add it to the component and now I have
<div style={style} onClick={this.onClick('lala')}>Button!</div>
But the error being returned didn't really changed - it's again the original error of Uncaught TypeError: (0 , _actions2.default) is not a function
I'm starting to run out of ideas now. Could someone please tell me how what my be the issue here?
Help me Stack Overflow, you're my only hope! to quote timeless classic.
Are you sure you are importing printOut in properly? Shouldn't it be import { printOut } from './../actions/actions.js' ?
Then, first argument in connect is mapStateToProps and the second is mapDispatchToProps this is probably why you have dispatch is not a function.
You are importing InputComponent:
import InputComponent from './../components/inputComponent.js'
but inside button component you are exporting it as Input:
export default Input
so change InputComponent with :
import Input from './../components/inputComponent.js'
Use this for connect
export default connect(mapDispatchToProps)(Input)
You are facing 2 problems.
1. Syntax problem in your import
The following problem Uncaught TypeError: (0 , _actions2.default) is not a function is caused by the import of your actions.
Instead of
import printOut from './../actions/actions.js'
It should be
import { printOut } from './../actions/actions.js'
2. You are incorrectly using connect
connect accepts these two arguments with the following order:
mapStateToProps: contains the props you want to give to the component
mapDispatchToProps: contains the actions to dispatch
Even if you could call your action, there is no way the dispatch will happen because you call the reducers instead of the dispatch.
What you should do is the following:
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { printOut } from './../actions/actions.js';
import InputComponent from './../components/inputComponent.js';
import PropTypes from 'prop-types';
const mapDispatchToProps = (dispatch) => {
return {
onClick: (input) => dispatch(printOut(input))
}
}
export default connect(null, mapDispatchToProps)(InputComponent);
You can read this documentation for more details: http://redux.js.org/docs/basics/UsageWithReact.html#implementing-container-components
I'm very new to React and trying to write an application which outputs a portfolio to one part of the page and, based on user interaction with that portfolio, displays some information in a lightbox/modal elsewhere in the DOM.
This requires that my two rendered components have some kind of shared state, and my understanding is that the best (or one of the best) way to achieve this is with Redux. However, being new to React and now adding Redux into the mix, I'm a little out of my depth.
I've created some (for now very dumb) action creators and reducers, all I'm trying to do initially is fetch some JSON and add it to my store. However, I'm not able to access dispatch from within my component and I'm not really sure where I'm going wrong.
If I console.log this.props from within my component I get an empty object, "{}".
Here are the main parts, any pointers would be really appreciated:
App.js:
import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import store from './redux/store';
import { Portfolio } from './redux/components/portfolio';
ReactDOM.render(
<Provider store={store}>
<Portfolio />
</Provider>,
document.getElementById('portfolioCollection')
);
actions/actionCreators.js:
export const populatePortfolio = obj => ({
type: POPULATE_PORTFOLIO,
obj
});
export const populateLightbox = obj => ({
type: POPULATE_LIGHTBOX,
obj
});
portfolio.js:
import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as actionCreators from '../actions/actionCreators';
export class Portfolio extends React.Component {
componentDidMount() {
this.getPortfolioData();
}
getPortfolioData() {
fetch('/data.json')
.then( (response) => {
return response.json()
})
.then( (json) => {
// dispatch action to update portfolio here
});
}
render() {
return(
// render component
);
}
}
function mapStateToProps(state){
console.log('state', state);
return {
state: state
}
};
function mapDispatchToProps(dispatch) {
console.log('dispatch', dispatch);
return {
actions: bindActionCreators({ populatePortfolio: populatePortfolio }, dispatch)
};
}
export default connect(
mapStateToProps,
mapDispatchToProps
)(Portfolio);
this.props is empty because you have not passed any props. You are using the unconnected component instead of the one that has been connected to redux.
To fix this, replace this line:
import { Portfolio } from './redux/components/portfolio';
with
import Portfolio from './redux/components/portfolio';
You are exporting both the connected and the unconnected component. You probably only want the last export. Since the connected component is exported as default you import it without using {} deconstruction.
unless you need to import the unconnected component in tests or something like that, you can remove the export statement from this line, since it makes no sense to export something that you don't intend to import in another file.
export class Portfolio extends React.Component {
You aren't meant to manually call dispatch in your components. The action creator function is automatically bound to dispatch for you. Simply call this.props.populatePortfolio() in your component.
I have the following smart component and I am specifying the initialUpload function is a required func:
import React, { Component, PropTypes } from 'react';
import UploadForm from '../../components/UploadForm/UploadForm';
import HeaderSelection from '../../components/HeaderSelection/HeaderSelection';
import { initialUpload } from '../../redux/modules/Upload';
import { connect } from 'react-redux';
console.log(typeof initialUpload); //function
#connect((state) => {
return {
file: state.getIn(['upload', 'file'])
};
}, {
initialUpload
})
export default class Home extends Component {
static propTypes = {
initialUpload: PropTypes.func.isRequired
};
render() {
return (
<div>
<UploadForm handleFilesChange={this.props.initialUpload}/>
<HeaderSelection/>
</div>
);
}
}
But I get the error message:
warning.js:36Warning: Failed prop type: The prop initialUpload is
marked as required in Connect(Home), but its value is undefined.
The function is wrapped in dispatch and passed down the component hierarchy fine so I am confused as to what is going on.
#connect is assigning the static propTypes to the resulting rapping component and not to Home itself, which is rather a weird behaviour! I think it is caused by ES7 transformation, this behaviour was not present in previous versions
A work around is to define the propTypes on the wrappedComponent outside class definition:
#connect(...)
export default Home extends Component{
render() {
// ....
}
}
Home.WrappedComponent.propTypes = {
initialUpload: PropTypes.func.isRequired
}
another option would be not to use the decorator & use connect directly
I'm trying to figure out how and where to load the data (ie call dispatch on my action) for my select box in react + redux + thunk. I'm not sure if it should go in the constructor of my App container, or should i load it inside my component (in my example: "MyDropdown")
My main App:
import MyDropdown from '../components/mydropdown';
// Should i import my action here and then...
// import { loadData } from '../actions';
class App extends Component {
render() {
return (
<div className="page-content">
<div className="option-bar">
// SEND it as a PROP inside MyDropdown...
<MyDropdown />
</div>
</div>
);
}
}
export default App;
My Component
// OR.. Should i load it in my MyDropdown component here?
import { loadData } from '../actions';
class MyDropdown extends Component {
// If i load it here on load, how do i do it?
render() {
return(
<select>
{renderOptions()}
</select>
);
}
}
I've tried componentDidMount() inside my App class, but it didnt seem to work. It seems to make sense to put the initialize data and call to actions there as it'll be all centralized, instead of calling actions inside my child components. Also, i'll have multiple select boxes that need to be loaded on startup, so my App class might grow quite a bit, is that the correct way to do it? I'm not sure what the best practice is as i've only just started learning react.
You should separate data components from presentation components (see post here).
So in your small example, MyDropdown should be passed all the data it needs in order to render the component. That would mean fetching the data in App (or some parent component of the component actually rendering the view.
Since you're working with React and Redux, the react-redux library provides a helper function to generate containers that fetch the data required for your presentation component.
To do that, change App to:
import { connect } from 'react-redux'
import MyDropdown from '../components/mydropdown';
import { loadData } from '../actions';
// This class is not exported
class App extends Component {
componentDidMount() {
this.props.loadData()
}
render() {
return (
<div className="page-content">
<div className="option-bar">
<MyDropdown data={this.props.data}/>
</div>
</div>
);
}
}
function mapStateToProps(state) {
const { data } = state
return {
data
}
}
function mapDispatchToProps(dispatch) {
return {
loadData(){
dispatch(loadData())
}
}
}
// Export a container that wraps App
export default connect(mapStateToProps, mapDispatchToProps)(App);
Alternatively, you could keep App the same and change MyDropdown to:
import { connect } from 'react-redux'
import { loadData } from '../actions';
// Exporting this allows using only the presentational component
export class MyDropdown extends Component {
componentDidMount() {
this.props.loadData()
}
render() {
return(
<select>
{renderOptions(this.props.data)}
</select>
);
}
}
function mapStateToProps(state) {
const { data } = state
return {
data
}
}
function mapDispatchToProps(dispatch) {
return {
loadData(){
dispatch(loadData())
}
}
}
// By default, export the container that wraps the presentational component
export default connect(mapStateToProps, mapDispatchToProps)(MyDropdown);
In both cases, look at what is actually being exported as default at the end. It's not the component; it's the return of connect. That function wraps your presentational component and returns a container that is responsible for fetching the data and calling actions for the presentational component.
This gives you the separation you need and allows you to be flexible in how you use the presentation component. In either example, if you already have the data you need to render MyDropdown, you can just use the presentation component and skip the data fetch!
You can see a full example of this in the Redux docs here.