Reusable components Redux

Question

I have a reusable component having its own action and reducer that i then use in another component.

Component AddToCart

import React, { Component } from 'react' import { bindActionCreators } from 'redux' import Button from 'environment/atoms/button' import * as AppIndexActionsCreators from 'environment/AppIndexActionsCreators' const AddToCart = (props)=>{ let boundActionCreators = bindActionCreators(AppIndexActionsCreators) return( <Button txt="Add To Cart" {...boundActionCreators} /> ) } export default AddToCart;

I pass it in

import React from 'react' import { Link } from 'react-router' import ProductDesc from '../Molecules/ProductDesc' import ProductImg from 'environment/sharedMolecules/ProductImg' import AddToCart from 'environment/sharedMolecules/AddToCart' const Product = (props) => { const product = props.product; return ( <div> <Link to={`/productDesc/${product.id}`}> <ProductDesc {...props} /> <ProductImg {...props} size="small" /> </Link> <AddToCart/> </div> ) } Product.propTypes = { displayProduct: React.PropTypes.func, product: React.PropTypes.object };

On Click on AddToCart nothing happens where it should print a console.log as defined in my Reducer...when inspecting the AddToStore component in the browser i can see in the props that the component sees the AddToCart fn defined in the Action file...... looks like Action is not dispatched to the reducer...how to fix this ?

I think you need to use react-redux connect wrapper

Ademola Adegbuyi
– Ademola Adegbuyi

2016-09-01 10:31:33 +00:00
Commented Sep 1, 2016 at 10:31 — Ademola Adegbuyi
– Ademola Adegbuyi, Commented Sep 1, 2016 at 10:31

Ilya Lopukhin · Accepted Answer · 2016-09-01 11:11:30Z

Use redux connect decorator.

Firstly, import it from react-redux bindings:
```
import { connect } from 'react-redux'; 
```

Then decorate your component with it!:

connect(mapStateToProps, mapDispatchToProps)(AddToCart)

Where functions in arguments should be defined somewhere like:

function mapStateToProps(state) { return { // someStoreVar: state.someStore.someStoreVar }; } function mapDispatchToProps(dispatch) { return bindActionCreators({ ...AppIndexActionsCreators }, dispatch); }

First one is to pass store state to props, second one is to pass actions to props. They are fully optional and if you don't need the store nor the actions bound to props you can omit them with null like:

connect(null, mapDispatchToProps)(AddToCart)

Finally you will wan't this decorated component to be exported by default instead of not-decorated one:
```
export default connect(mapStateToProps, null)(AddToCart) 
```

At this moment you will be able to dispatch any actions or to access any store vars from props inside the component. This is a default technique to do this in react and you will use this quite alot. If this still sounds confusing feel free to ask for explanations.

Allright, I get to connect my Action with my component, but it still does not call the reducer, what could be a cause for that ? how actioncreators are being listened by the reducer ?

Nicc · Accepted Answer · 2016-09-02 15:25:55Z

I ended up rewriting my component as suggested by Syberic

import React, { Component } from 'react' import { bindActionCreators } from 'redux' import { connect } from 'react-redux'; import Button from 'environment/atoms/button' import * as AppIndexActionsCreators from 'environment/AppIndexActionsCreators' const AddToCart = (props) => { // let boundActionCreators = bindActionCreators(AppIndexActionsCreators) return( <Button txt="Ajouter au panier" clickAddToCart = { props.addToCart } /> ) } function mapDispatchToProps(dispatch) { return bindActionCreators(AppIndexActionsCreators, dispatch); } export default connect(null,mapDispatchToProps)(AddToCart)

Additionally i corrected my Reducer where there was a syntax error. I did not put 'export default' but only 'export'

import { ADD_TO_CART } from './ActionTypes' export default function cart(state=[],action){ console.log(); switch (action.type){ case ADD_TO_CART: console.log('yeah'); return state; default: return state; } }

Collectives™ on Stack Overflow

Reusable components Redux

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related