Reactjs 如何在redux中使用onClick和pass组件获得道具？

我正在学习redux，我很难理解它。 我有一个文章列表，每篇文章都包含标题和url。 我想获取当前文章的url，并将其传递给其他组件以显示预览url

当我点击按钮打开article.js中的其他组件时，我试图传递当前文章的url，但它不起作用。它只显示所有文章的所有url。 如果有人能帮助我或解释我错了，那就太好了

在actions.js中

export const articleClick = url => ({
    type: SHOW_ARTCILE,
    payload: { url }
});

在redux中，article.js

  article: null
}

const articleReducer = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case 'SHOW_ARTCILE':
      return [
        ...state,
        {
          url: action.url,
        }
      ]
        ;
    default:
      return state;
  }
}

export default articleReducer;

在Article.js中

import { articleClick } from '../../redux/actions';
import { connect } from "react-redux";

class Article extends Component {

  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <p>{this.props.article.title}</p>
        <div>
          <p>Posted by : {this.props.article.by}</Posted>
          <button onClick={() => this.props.articleClick(this.props.article.url), console.log(this.props.article.url)}>Visit website</button>
        </div>
      </div>
    )
  }
}

export default connect(
  null,
  { articleClick }
)(Article);

从“../../redux/actions”导入{articleClick}；
从“react redux”导入{connect}；
类文章扩展了组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
{this.props.article.title}

发布人：{this.props.article.by}
this.props.article单击（this.props.article.url）、console.log（this.props.article.url）}>访问网站
)
}
}
导出默认连接(
无效的
{articleClick}
)（第条）；

在Preview.js中

import { connect } from "react-redux";
import { articleClick } from '../../redux/actions';

class PreviewArticle extends Component {
  render() {
    return (
      <p>
        {this.url}
      </p>
    );
  }
}

export default connect(
  null,
  { articleClick }
)(PreviewArticle);

从“react redux”导入{connect}；
从“../../redux/actions”导入{articleClick}；
类预览工具扩展组件{
render（）{
返回(

{this.url}

);
}
}
导出默认连接(
无效的
{articleClick}
)（预演）；

让我们在这里尝试优化react-redux流程，这样我们可以更轻松地解释问题

首先，让我们尝试使您的应用程序组件如下所示：

index.js

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore, combineReducers } from "redux";
import articles from "./reducers/articles";
import Articles from "./components/Articles";
import Preview from "./components/Preview";

const store = createStore(
  combineReducers({
    articles: articles
  })
);

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <Articles />
        <Preview />
      </div>
    </Provider>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

const initialState = {
  articles: [
    {
      title: "Corgi",
      url: "https://www.akc.org/dog-breeds/cardigan-welsh-corgi/"
    },
    {
      title: "Leopard Dog",
      url: "https://www.akc.org/dog-breeds/catahoula-leopard-dog/"
    }
  ],
  article: {}
};

const articlesReducer = (state = initialState, action) => {
  switch (action.type) {
    case "SHOW_URL":
      return {
        ...state,
        article: action.payload
      };
    default:
      return state;
  }
};

export default articlesReducer;

在reducer中，我们有一个默认状态，其中包含一个对象（项目）数组和一个当前项目。我们将使用两者来填充文章的显示和预览组件。我们的reducer只会在发送了一个类型为“SHOW_URL”的操作时更新，因此我们将更新当前文章

请参见actions.js中的action creator：

export const showUrl = article => {
  return {
    type: "SHOW_URL",
    payload: article
  };
};

现在，对于我们的组件，文章、文章和预览

在文章中，我们需要使用MapStateTops来获取Redux州可用的文章列表。然后，我们迭代每篇文章并呈现一个单独的

文章

组件。作为道具传递迭代的文章

import React from "react";
import { connect } from "react-redux";
import Article from "./Article";

const Articles = ({ articles }) => {
  return (
    <div>
      {articles.articles.map(article => {
        return <Article article={article} />;
      })}
    </div>
  );
};

const mapStateToProps = state => {
  return {
    articles: state.articles
  };
};

export default connect(mapStateToProps)(Articles);

我在这里为您创建了一个示例代码沙盒，以供参考：

import React from "react";
import { connect } from "react-redux";
import { showUrl } from "../actions/articleActions";

const Article = ({ article, showUrl }) => {
  return (
    <div>
      <button onClick={() => showUrl(article)}>{article.title}</button>
    </div>
  );
};

const mapDispatchToProps = dispatch => {
  return {
    showUrl: article => {
      dispatch(showUrl(article));
    }
  };
};

export default connect(
  null,
  mapDispatchToProps
)(Article);

import React from "react";
import { connect } from "react-redux";

const Preview = ({ articles }) => {
  const thisArticle = articles.article;
  return (
    <div>
      <h4>{thisArticle.title}</h4>
      <a href={thisArticle.url}>Go To Link</a>
    </div>
  );
};

const mapStateToProps = state => {
  return {
    articles: state.articles
  };
};

export default connect(mapStateToProps)(Preview);