时间戳

首页 > 解决方案 > 如何从表单外部的 redux 存储中访问值？

reactjs - 如何从表单外部的 redux 存储中访问值？

问题描述

我有一个表单，其中我将值插入存储并重定向到另一个页面以显示来自 redux 存储的所有值。

我们如何在重定向页面中访问存储中的数据？

我正在寻找工作示例以查看 store.subscribe 的方式。我正在尝试不同的示例，但没有成功。

将不胜感激您的帮助。

import React from "react";
import { connect } from "react-redux";
import * as courseActions from "../../redux/actions/courseActions";
import PropTypes from "prop-types";
import { bindActionCreators } from "redux";
import history from './history'


class CoursesPage extends React.Component {
  state = {
    course: {
      title: "",
    },
  };

  handleSubmit = (event) => {
    event.preventDefault();
    this.props.actions.loadCourses.createCourse(this.state.course).then(() => {
      this.props.history.push('/allcourses'); 
  };

  render() {
    return (
      <div>
        <form onSubmit={this.handleSubmit}>
          <h2>Courses</h2>
          <h3>Add Course</h3>
          <input type="submit" value="Add Course" />
          {this.props.courses.map((course) => (
            <div key={course.title}>{course.title}</div>
          ))}
        </form>
        <hr />
        
      </div>
    );
  }
}

CoursesPage.propTypes = {
  courses: PropTypes.array.isRequired,
  actions: PropTypes.object.isRequired,
};

function mapStateToProps(state) {
  return {
    courses: state.courses,
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: {
      loadCourses: bindActionCreators(courseActions, dispatch),
    },
  };
}

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

AllCourses.js

import React from "react";
import store from "../../redux/configureStore"

class AllCourses extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
        courses: [],
      };
  
      store.subscribe(() => {  
        this.setState({
            courses: store.getState.courses
          });
      });
    }
  
    render() {
      return (
        <div>
          {this.state.courses.map((course) => <div key={course.title}>{course.title}</div> )}
        </div>
      );
    }
  }

  export default AllCourses;

标签： reactjsreact-redux

解决方案

您还可以将AllCourses组件连接到您的 redux 商店。

class AllCourses extends React.Component {
  render() {
    return (
      <div>
        {this.props.courses.map((course) => (
          <div key={course.title}>{city.title}</div>
        ))}
      </div>
    );
  }
}

const mapStateToProps = state => ({
  courses: state.courses,
});

export default connect(mapStateToProps)(AllCourses);

推荐阅读