Question

我无法理解为什么在一种情况下调用减速器而在另一种情况下不调用。页脚组件如下所示。

档案Footer.jsx

import React from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import './Footer.scss';
import * as footerActions from '../../redux/actions/footer';

const mapStateToProps = (state) => {
  return state;//{state: state, footerState: getFooterData(state)};
};

// Footer component is aware of only footer actions
const mapDispatchToProps = (dispatch) => {
  return {
    actions: bindActionCreators(footerActions, dispatch)
  };
};

var Footer = React.createClass({
  propTypes:{
    state: React.PropTypes.object,
    actions: React.PropTypes.object
  },
  componentWillMount() {
    this.props.actions.changeLanguage("dutch");//<-- This calls reducer and changes language
  },
  changeLang(language) {
    this.props.actions.changeLanguage("spanish");//<--- This doesn't calls reducer
  },
  render() {
    var that = this;
    return (
      <div className="footer">
        <div onClick={that.changeLang.bind(that, 'english')}>English</div>
        <div onClick={that.changeLang.bind(that,'german')}>German</div>
      </div>
    );
  }
});
export default connect(mapStateToProps, mapDispatchToProps)(Footer);

操作文件footer

export const LANGUAGE_CHANGE  = 'LANGUAGE_CHANGE';

export function changeLanguage(data, context) {
  return {
    type: LANGUAGE_CHANGE,
    data
  };
}

Reducer file footer

import { LANGUAGE_CHANGE } from '../actions/footer';

export default function footer(state = {}, action) {
  switch (action.type) {
    case LANGUAGE_CHANGE:
      debugger;
      return  Object.assign({}, state, {language:action.data});
    default:
      return state;
  }
}

在footer.jsx组件代码中，从LANGUAGE_CHANGE方法调度componentDidMount操作成功调用footer reducer，但在LANGUAGE_CHANGE从{调度changeLang操作时未调用reducer {1}}方法。无法弄清楚出了什么问题？帮助感谢。

React Redux reducer没有被触发

0 个答案: