减速器没有被调用甚至动作被调用

时间:2017-04-28 08:37:38

标签: javascript reactjs redux react-redux reducers

我尝试向现有列表中添加更多道具,我可以触发调度操作,但是reducer不会触发 我有我的headercontainer.js文件,如

    import React, { Component, PropTypes } from 'react'
    import { connect } from 'react-redux'
    import { fetchAccount } from 'actions/account'
    import { getAccount } from 'reducers/account'
    import { fetchCart } from 'actions/cart'
    import { getCart } from 'reducers/cart'
    //import * as cls from 'actions/cls'
    import { getReadmore } from 'reducers/cls'
    import * as cls from 'actions/cls'

    import { fetchAuthenticityToken } from 'actions/authenticityToken'
    import { getAuthenticityToken } from 'reducers/authenticityToken'
    import Header from 'components/Header'

    class HeaderContainer extends Component {
      static propTypes = {
        account: PropTypes.object,
        authenticityToken: PropTypes.object,
        cart: PropTypes.object,
          dispatch: PropTypes.func

      }

      componentDidMount() {
        if (typeof document !== 'undefined') {
          if (!this.props.account.isFetching) {
            this.props.dispatch(fetchAccount())
          }
          if (!this.props.authenticityToken.isFetching) {
            this.props.dispatch(fetchAuthenticityToken())
          }
          if (!this.props.cart.isFetching) {
            this.props.dispatch(fetchCart())
          }
        }
      }

       constructor(props) {
            super(props);

            this.state = {classToSend: true };
        }

        stateToRender(){
            (this.state.classToSend) ? this.setState({classToSend: false}) : this.setState({classToSend: true});
        }




        onClickHandler(){

            this.stateToRender();
            let action = cls.readMore(this.state.classToSend)
        this.props.dispatch(action)



            // this.props.readMore(this.state.classToSend);
        }


      render() {
        const { account, cart, authenticityToken } = this.props

        if(!account || !cart) {
          return false
        }

        return (
            <div id ="cvb">
          <div id="toggle-nav" className={this.state.toggleClass?'visible-xs nav-open':'visible-xs'} onClick={() => this.onClickHandler()} >
          <span data-action="toggle-nav" className="action mt-menu-label">
            <span className="mt-menu-bread mt-menu-bread-top">
              <span className="mt-menu-bread-crust mt-menu-bread-crust-top"></span>
            </span>
            <span className="mt-menu-bread mt-menu-bread-middle">
              <span className="mt-menu-bread-crust mt-menu-bread-crust-middle"></span>
            </span>
            <span className="mt-menu-bread mt-menu-bread-bottom">
              <span className="mt-menu-bread-crust mt-menu-bread-crust-bottom"></span>
            </span>
          </span>
        </div> 

          <Header account={account} cart={cart} />
          </div>
        )
      }
    }

    const mapStateToProps = (state) => {
      return {
        account: getAccount(state),
        cart: getCart(state),
        classToSend: getReadmore(state),
        authenticityToken: getAuthenticityToken(state)
      }
    }

    export default connect(mapStateToProps)(HeaderContainer)
  

我的cls.js reducer

export function getReadmore(state) {
console.log(state.readMore1)
console.log("are yar")
return state.readMore1
}

export  function readMore1 (state="", action) {
console.log(action.type)
 switch(action.type){

    case READ_MORE:

        return action.payload;
}

return state;
}
  

cls.js行动

export function readMore(class_something) {


const READ_MORE = 'READ_MORE';

    console.log("--------------------------")
    console.log(class_something)

    return {
        type: READ_MORE,
        payload: class_something
    };

}

虽然我能够调用动作cls.js文件但是reducer没有触发器 任何人都可以帮助我摆脱这个麻烦。

我的编辑

我的reducer文件夹中的index.js

import { combineReducers } from 'redux'
import { reducer as form } from 'redux-form'
import { routerReducer } from 'react-router-redux'
import { currency } from './currency'
import { cart } from './cart'
import { account } from './account'
import { alerts } from './alerts'
import { login } from './login'
import { authenticityToken } from './authenticityToken'
import { products } from './products'
import { product } from './product'

const routing = routerReducer

const rootReducer = combineReducers({
  form,
  routing,
  currency,
  cart,
  cls,
  account,
  alerts,
  authenticityToken,
  login,
  products,
  product
})

export default rootReducer

1 个答案:

答案 0 :(得分:0)

您的reducer文件中的案例应为&#34; READ_MORE&#34; (带引号)不是READ_MORE(没有引号)。