【问题标题】:reducer not getting called even action get callled减速器没有被调用,甚至动作被调用
【发布时间】:2017-09-26 07:24:11
【问题描述】:

我尝试向现有列表添加更多道具,我能够触发调度操作,但减速器没有触发 我有我的 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 减速器

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 文件夹中的我的 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

【问题讨论】:

  • 您是否收到任何 js 开发者控制台错误?
  • @elpddev 没有错误
  • 这应该是因为 @D Vorona 回答 case READ_MORE: 没有定义。你在哪里设置 READ_MODE 在减速器中让它知道它的意思?你导入了吗?
  • 在 cls.js 动作中我定义它

标签: javascript reactjs redux react-redux reducers


【解决方案1】:

reducer 文件中的案例应该是“READ_MORE”(带引号)而不是 READ_MORE(不带引号)。

【讨论】:

  • 不,这不是问题
  • 好的。你在哪里实例化你的商店?你有没有把它和你的减速器联系起来?
  • 动作不叫reducer
  • 如果你有多个 reducer 文件,你创建一个 rootReducer.js 文件,将你的 reducer 导入其中,然后使用 combineReducer() 组合它们。然后你需要将这个 rootReducer 文件导入到你的 store.js 文件中,这是你创建商店的地方(使用函数 createStore())。
  • 看起来您需要做的就是将该 index.js 文件导入您创建商店的文件中。此外,正如@elpddev 所提到的,除非您专门将 READ_MORE 导入到该减速器文件中,否则它是未定义的。约定是只使用字符串“READ_MORE”。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2017-03-12
  • 2015-01-11
  • 1970-01-01
  • 2016-02-09
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多