Как обновить состояние компонента через Out Redux

Question

Я пытаюсь показать модальный режим, когда пользователь нажимает кнопку редактирования. Я устанавливаю действие editProject. Когда пользователь нажимает кнопку редактирования, editProject возвращает значение true.

Но мы можем превратить редуксное состояние в реквизит, а не в состояние компонентов. Тогда как мы можем динамически обновлять состояние компонента при смене реквизита?

Вот компонент EditProjectForm

import React from "react";
import {Modal, Button, Form} from "react-bootstrap"
import {connect} from "react-redux";
import {updateProject} from "../../actions";

class EditProjectForm extends React.Component {

    constructor(props) {
        super(props);

        this.state = {status: true}
    }

    onCloseClick() {
        this.setState({status: false})
    }

    onSubmit(e) {
        //TODO update project
    };

    render() {
        return (
            <Modal show={this.state.status} onHide={this.onCloseClick}>
                <Modal.Header closeButton>
                    <Modal.Title>{this.props.project.title}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form onSubmit={this.onSubmit.bind(this)}
                          style={{backgroundColor: "#f5f5f5", paddingBottom: 30}}>
                        <Form.Group controlId="title" style={{margin: 10}}>
                            <Form.Label column>Project Title</Form.Label>
                            <Form.Control type="text" placeholder="Enter a title"/>
                        </Form.Group>

                        <Form.Group controlId="description" style={{margin: 10}}>
                            <Form.Label column>Project Description</Form.Label>
                            <Form.Control as="textarea" placeholder="Enter description"/>
                        </Form.Group>

                        <Button variant="primary" type="submit" className="float-right" style={{marginRight: 10}}>
                            Save
                        </Button>
                    </Form>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={this.onCloseClick}>
                        Close
                    </Button>
                </Modal.Footer>
            </Modal>
        )
    }
}

const mapper = function (state) {
    return {
        status: state.editProject,
        project: state.selectProject
    }
};

export default connect(mapper, {updateProject})(EditProjectForm)

Answer 1

Я думаю, что вы можете достичь этого двумя способами:

1. Вы можете использовать Redux state this.props.status непосредственно в вашем компоненте вместо this.state.status, таким образом вы бы отправили действиена onCloseClick , который обновит хранилище Redux и изменит состояние на false.

2 - Хотя обычно это не рекомендуется, вы можете управлять состоянием из реквизитов, используя life getDerivedStateFromProps как

static getDerivedStateFromProps(props) {
  return {
           status: props.status
  }
}

Теперь внутреннее состояние вашего компонента получено из реквизита.

Вы можете узнать больше о getDerivedStateFromProps Здесь

Надеюсь, это поможет

Answer 2

Когда вы подключите этот компонент к магазину, вы сможете получить доступ к status, используя this.props.status, и для обновления статуса вам нужно действие, например updateStatus, пожалуйста, прочитайте больше о действиях: https://redux.js.org/basics/actions

import React from "react";
import {Modal, Button, Form} from "react-bootstrap"
import {connect} from "react-redux";
import {updateProject} from "../../actions";

class EditProjectForm extends React.Component {
    render() {
        return (
            <Modal show={this.props.status} onHide={this.onCloseClick}>
                <Modal.Header closeButton>
                    <Modal.Title>{this.props.project.title}</Modal.Title>
                </Modal.Header>
                <Modal.Body>
                    <Form onSubmit={this.onSubmit.bind(this)}
                          style={{backgroundColor: "#f5f5f5", paddingBottom: 30}}>
                        <Form.Group controlId="title" style={{margin: 10}}>
                            <Form.Label column>Project Title</Form.Label>
                            <Form.Control type="text" placeholder="Enter a title"/>
                        </Form.Group>

                        <Form.Group controlId="description" style={{margin: 10}}>
                            <Form.Label column>Project Description</Form.Label>
                            <Form.Control as="textarea" placeholder="Enter description"/>
                        </Form.Group>

                        <Button variant="primary" type="submit" className="float-right" style={{marginRight: 10}}>
                            Save
                        </Button>
                    </Form>
                </Modal.Body>
                <Modal.Footer>
                    <Button variant="secondary" onClick={this.onCloseClick}>
                        Close
                    </Button>
                </Modal.Footer>
            </Modal>
        )
    }
}

const mapper = function (state) {
    return {
        status: state.editProject,
        project: state.selectProject
    }
};

export default connect(mapper, {updateProject})(EditProjectForm)