javascript - Redux 正在改变组件的状态，然后返回到初始状态

Question

我是新的 Redux 开发人员。我正在尝试在 Web 应用程序中使用 React 和 Redux 创建一个选项卡组件。

当我选择一个选项卡时，我可以在控制台和 Redux Dev Tool 中更改状态，但一旦更改，它就会返回到初始状态(它恰好发生在 '' 或 'tabData' 或 'tabBulletin' 中) tabReducer.js

我不明白它是为了解决这个逻辑问题。请问，有人可以帮助我在这方面变得更明智吗？

谢谢。

这是与该问题相关的父级 React 标签

<TabsHeader>
  <TabHeader id='tab1-tab' label='Data | 34' target='tabData' />
  <TabHeader id='tab2-tab' label='Bulletins | 35' target='tabBulletin' />
</TabsHeader>
<TabsContent>

</TabsContent>

TabHeader.js

import React, { Component } from 'react'
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux'

import { selectTab } from './tabActions'

class TabHeader extends Component {
    render() {
        const selected = this.props.tab.selected === this.props.target
        return (

                <a href='/' id={this.props.id}
                onClick={() => this.props.selectTab(this.props.target)}
                data-target={this.props.target}
                className={selected ? 'active' : '' } 
            >
                {this.props.label}
            </a>
        )
    }
}

const mapStateToProps = state => ({ tab: state.tab })
const mapDispatchToProps = dispatch => bindActionCreators({ selectTab }, 
dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(TabHeader)

tabActions.js

export function selectTab(tabId) {
    console.log(tabId)
    return {
        type: 'TAB_SELECTED',
        payload: tabId
    }
}

tabReducer.js

const INITIAL_STATE = { selected: 'tabData' }

export default (state = INITIAL_STATE, action) => {

    switch (action.type) {
        case 'TAB_SELECTED':
            return { ...state, selected: action.payload }
        default:
            return state
    }
}

Answer 1

您发送的方式错误。您在哪里读到这篇文章？

dispatch => bindActionCreators({ selectTab }, dispatch)

您所需要的只是一个简单的调度，如下所示:

dispatch => ({ selectTab: tabId => selectTab(tabId) })

就是这样。