Question

我有一个奇怪的问题，我可以看到我的动作创建者在鼠标点击时被触发，但状态似乎并不“似乎”要更新。我也没有收到任何可以帮我调试的错误信息。

我尝试使用的状态部分非常简单，默认设置为false，在某些条件下也可以为true。这是我在单击后在控制台中初始渲染时看到的内容，应将“detail”布尔值更改为true：

这是我的Redux连接组件，名为“Journey”：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Switch, Route } from 'react-router-dom'

import Header from '../Header'
import AccessibilityBar from '../AccessibilityBar'
import AdditionalItemsBar from '../AdditionalItemsBar'

import Armenia from './Armenia'
import Holocaust from './Holocaust'
import Rwanda from './Rwanda'
import Detail from '../Detail'

export class Journey extends Component {

  render() {
    const { match, detail } = this.props
    console.log('Current value of detail: ' + detail)

    return (
      <div className="journey">
        <Header />
        <AccessibilityBar />

        <Switch>
          <Route path={`${match.url}/:armenia`} component={Armenia} />
          <Route path={`${match.url}/:holocaust`} component={Holocaust} />
          <Route path={`${match.url}/:rwanda`} component={Rwanda} />
        </Switch>

        <img src="./img/left-caret.svg"  style={{ position: 'absolute', top: '375px', left: '15px' }}/>
        <img src="./img/right-caret.svg"  style={{ position: 'absolute', top: '375px', right: '15px' }}/>

        {
          detail ? <Detail /> : null
        }

        <AdditionalItemsBar />
      </div>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    detail: state.detail
  }
}
export default connect(mapStateToProps)(Journey)

动作创建者：

import { TOGGLE_DETAIL } from './types'

export function toggleDetail() {
  console.log('toggle action creator runs...')
  return {
    type: TOGGLE_DETAIL,
    payload: true
  }
}

减速器：

import { TOGGLE_DETAIL } from '../actions/types'

export default function(state = false, action) {
  switch(action.type) {
    case TOGGLE_DETAIL:
      return action.payload
  }
  return state
}

我有一个名为“ImageBlock”的可重用组件，它在单个视图上有多个实例，实际上触发了动作创建者。这是代码：

import React, { Component } from 'react'
import { connect } from 'react-redux'
import { toggleDetail } from '../../actions/detail'

export class ImageBlock extends Component {
  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div style={this.props} className="image-block" onClick={this.props.toggleDetail}>
        <img src="./img/text-icon.svg" className="text-hint"/>
      </div>
    )
  }
}

const mapDispatchToProps = () => {
  return {
    toggleDetail
  }
}

export default connect(null, mapDispatchToProps)(ImageBlock)

PS 为了让您更清楚地了解视图的确切内容，以下是该视图的屏幕截图。如您所见，红色块是ImageBlock的一个实例。点击它们后，它们会触发动作创建者。

Answer 1

好像你只是在调用行动，但是你没有调度它，如果没有调度，你的经理将如何知道某个行动已被触发？

一种方法是使用bindActionCreators，如下所示：

...
import * as actions from '/path/to/actions';

...

const mapDispatchToProps = dispatch => ({
  myActions: bindActionCreators(actions, dispatch),
});
...

根据文档：

bindActionCreators(actionCreators, dispatch)

将值为动作创建者的对象转换为具有相同键的对象，但将每个动作创建者包装到一个调度调用中，以便可以直接调用它们。

这样您就可以直接执行myActions.toggleStuff()之类的操作而无需使用调度。我喜欢这种方法，因为我不必记住发送，因为动作已经包含在其中。

有关详细信息，文档很棒LINK

Redux状态未更新没有错误消息

1 个答案: