CODEWITHSUNDEEP
reactjsreduxreact-redux
BC00
BC00

Reputation: 1639

React-Redux action dispatch issue

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

Upvotes: 1

Views: 206

Answers (1)

Jonathan Huang
Jonathan Huang

Reputation: 2086

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'

Upvotes: 2

Related Questions