我在 redux 上写标签时犯了哪些错误？我需要在我的代码中更改什么？

Question

我在 React.js 上实现了非常简单的选项卡。你可以看到它在沙盒中是如何工作的：https : //codesandbox.io/s/react-tabs-redux-example-36psr 我的 React 代码：import React from "react";import ReactDOM from "react-dom";const items = [{content:"London"}, {content:"Paris"}];class Content extends React.Component {    render(){        return (        <div>        {this.props.content}        </div>        );    }}class Tabs extends React.Component {    state = {        active: 0    }   open = (e) => {       this.setState({active: +e.target.dataset.index})   }    render(){        return(        <div>            {this.props.items.map((n, i)=>            <button data-index={i} onClick={this.open}>{n.content}</button>            )}       {this.props.items[this.state.active] && <Content {...this.props.items[this.state.active]} />}        </div>        );    }}ReactDOM.render(<Tabs items={items} />, document.getElementById("root"));但是现在我开始研究 Redux，所以我决定在 Redux 上制作这些选项卡。但不幸的是，我在编辑器上的选项卡不起作用。我在编写代码时犯了哪些错误以及如何修复它们？

Answer 1

以下是您必须解决的问题才能使其正常工作：

语法错误：

1. 在onClick,this.props.someTab.active:应该只是active:

2. mapStateToProps,mapDispatchToProps并且connect应该移到Tabs组件之外

3. 你错过了一个{以前this.props.items[this.prop.someTab.active]

一旦你修复了这些，你仍然会得到一些错误，因为你试图访问不存在的道具的属性。Tabs没有连接到商店，所以您拥有的唯一道具是items. 添加inconsole.log(props)的第一行以了解我的意思。renderTabs

如何修复 Redux 错误：

1. 您需要将您的商店传递给您的提供商： <Provider store={store}>

2. 您正在调用连接，但没有将您的组件连接到 Redux。修复：

class Tabs extends Component {...}

const ConnectedTabs = connect(mapState, mapDispatch)(Tabs);

...

<Provider store={store}>

  <ConnectedTabs />

</Provider>

1. mapStateToProps应该返回一个对象，其属性对应于您的组件期望的道具，而不是减速器名称。在这种情况下：return { someTab: state.oneReducer.someTab }

现在您应该看到一个没有错误的页面。我们还没有完成！

1. 在mapDispatchToProps你需要调用你传递给的函数dispatch，特别是用你在组件中传递的参数调用它：

return { changeTab: change => dispatch(changeTab(change)) };

或者只是使用对象形式mapDispatch：

const mapDispatchToProps = { changeTab } // it works!

1. 在您的减速器中，您正在添加一个state.change属性，当您想要更新state.someTab.active. 你可以 return Object.assign({}, state, { someTab: { active: action.change.active } })，或者让它更简单：去掉对someTabdo的引用Object.assign({}, state, { active })。

这应该可以让您大体上到达您想去的地方。

一些简化事情的建议：

1. 此时你也真的不需要多个减速器。你真的可以直接reducer进入createStore，并摆脱对 . 的引用oneReducer。

2. 您使用的唯一组件方法是render，因此您可以使用函数组件而不是类组件。（this.props将成为props）

3. 你不需要data-index，你可以做onClick={() => props.changeTab({ active: i })}

另一个注意事项：您可以搬进items商店。你仍然可以通过 props 访问它们，所有相关的状态都将保存在一个地方，这是 Redux 的优势之一。

祝你好运！