如何使用Redux从项目列表中发送特定项目的数据

时间:2020-03-24 21:55:12

标签: reactjs react-native redux

嗨,大家好吗?我有这个已经被加载的数据列表,肯定是每个列表的ProjectSummary。

当单击特定的ProjectSummary或​​通过我的项目道具中的id.map时,我需要将数据设置为ProjectDetails吗?

它在我的ProjectList.js中

const ProjectList = props => {
  const { history, projects, loadProjects } = props;
  const [isReady, setIsReady] = useState(false);

  useEffect(() => {
    async function fetch() {
      //const { data } = await axios.get("http://localhost:20202/projects");

      setTimeout(() => {
        const data = [
          {
            id: 1,
            title: "titlehere",
            content: "blablabla",
            user: {
              name: "JSON"
            }
          },
          {
            id: 2,
            title: "title here",
            content: "survival mode activated",
            user: {
              name: "JSON"
            }
          },
          {
            id: 3,
            title: "i am the third title of projects",
            content: "blablalbalba",
            user: {
              name: "JSON"
            }
          }
        ];

        loadProjects(data);
        setIsReady(true);
      }, 2000);
    }

    fetch();
  }, []);

在我的action / projects.js中:

export function loadSpecificProject(project) {
  return {
    type: "LOAD_SPECIFIC_PROJECT",
    project
  };
}

ProjectDetails.js:

import React, { useEffect, useState } from "react";
import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import * as projectActions from "../../actions/projects";
import axios from "axios";

const ProjectDetails = props => {
  const { project } = props;
  return (
    <div className="container section project details">
      <div className="card z-depth-2">
        <div className="card-content">
          <span className="card-title"> title </span>
          <p> {project.title} </p>
        </div>
      </div>
    </div>
  );
};

const mapStateToProps = state => ({
  // user: state.auth.user
  project: state.project
});

const mapDispatchToProps = dispatch =>
  bindActionCreators(projectActions, dispatch);

export default connect(mapStateToProps, mapDispatchToProps)(ProjectDetails);

我的ProjectSummary.js正在完美加载 每个数组。

0 个答案:

没有答案