1

I am new to React and Redux. I am trying to trigger a function when a user clicks a list item. I cant seem to get it to attach to the list item properly or flow through to the reducer passing in the right action type.

Component

import React from 'react';
import LookDetail from './LookDetail';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import selectLook from '../actions/looks'
import { Router, Route, Link } from 'react-router';
require('../stylesheets/main.scss');
require('../stylesheets/home.scss');

class LooksListItem extends React.Component {
  render() {
    return(
      <div>
        <div className="col-sm-5">
          <Link to={`/home/looks/${this.props.data.id}`}>
            <li className="look-list-item"
             onClick={() => this.props.selectLook(this.props.data)}>
              {this.props.data.name}
            </li>
          </Link>
        </div>
        <div className="col-sm-5"><LookDetail name={this.props.data.name}/></div>
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    looks: state.looks
  }
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ selectLook: selectLook }, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(LooksListItem)

Action

export function selectLook(look) {
  return {
    type: 'EDIT_LOOK',
    payload: look
  };
}

Reducer

const getInitialState = () => {
  // make action to fetch looks
  return {
    "looks":[{id: 1, name: "Home Screen", active:false},{id: 2, name: "About Screen", active:false},{id: 3, name: "Gameday", active:false},{id: 4, name: "After Game", active:false}]
  }
}

const looks = (state = getInitialState(), action) => {
  let newState;
  switch (action.type) {
    case 'EDIT_LOOK':
      console.log("in edit look action")
      console.log(action)
      newState = Object.assign({}, state);
      return newState
    default:
      console.log("made it to default")
      console.log(action)
      console.log(state)
      return state
   }
};

export default looks;

I see this error in console

When I inspect the component Im not seeing the selectLook callback

2
  • did you try adding a constructor and calling super on props? Commented May 2, 2016 at 23:12
  • @JohnRuddell just tried, no luck... Commented May 3, 2016 at 0:05

1 Answer 1

2

This statement, import selectLook from '../actions/looks', means that you are importing the default export from the ../actions/looks file.

In that file, selectLooks is not the default export, but a named export.

So, you actually need to import the function like this import { selectLook } from '../actions/looks'

Sign up to request clarification or add additional context in comments.

1 Comment

I love you, now i can sleep

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.