Question

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

当我选择一个选项卡时，我可以在控制台和Redux Dev Tool中更改状态，但是一旦更改它就会变回初始状态（它恰好发生在＆＃39;＆＃39;或者## 39; tabReducer.js中的tabData＆＃39;或＆＃39; tabBulletin＆＃39;

我不理解它来解决这个逻辑问题。拜托，任何人都可以帮助我明白这一点吗？

谢谢。

这是与问题相关的父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) })

那就是。

Answer 2

我又回来了，现在有了解决方案：

问题在于TabHeader.js中组件的标记：这使得网站重新加载将其转换为初始状态

所以我改为＆＃34; javaxritp：;＆＃34;这解决了Redux的问题。

下面的行是映射动作创建者，它允许被触发以发送给减速器以发展状态。我可能会失去一个让Redux将其恢复到初始状态的小东西。我从我的React课程中学到了这一点。无论如何，谢谢你。

const mapDispatchToProps = dispatch => bindActionCreators({ selectTab }, dispatch)
dispatch => bindActionCreators({ selectTab }, dispatch)

Redux正在改变组件的状态，然后它又回到初始状态

2 个答案: