React-Redux行动调度问题

Question

我是React和Redux的新手。我试图在用户单击列表项时触发一个函数。我似乎无法将其正确地附加到列表项或流向正确操作类型的reducer。

组件

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)

动作

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

减速

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;

Answer 1

此声明import selectLook from '../actions/looks'表示您正在从../actions/looks文件导入默认导出。

在该文件中，selectLooks不是默认导出，而是命名导出。

因此，您实际上需要导入像import { selectLook } from '../actions/looks'

这样的函数