React-Redux 动作调度问题

Question

我是 React 和 Redux 的新手。我试图在用户单击列表项时触发一个函数。我似乎无法让它正确附加到列表项或流向传递正确操作类型的减速器。

组件

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'

React-Redux 动作调度问题

React-Redux action dispatch issue

reactjs

redux

react-redux

组件

动作

减速机