When learning redux, to use redux, how to pass the submitTaskId function like using props?

constructor() {
        super();
        this.state = {
            showPageGroup: [],
            current: 0,
            showPageNumber: 0, // 
            currentShowPage: 0, // 
            selectTaskId: [], // ID
            preSelTaskIdQuantity: 0, // 
            currentClickPage: 0, // 
            ellipsisNumber: 0, // 
            showBorderColor: -1,
            ellipsisPosition: "behind",
            startGetIndex: 0, //  - 
            endGetIndex: 0, //  - 
            arrowShow: true, // 
            showKey: true, // 
            useInformationShow: false,
            useId: 0,
            useType: 1,
            userKeyValue: {},
            isAdmin: false,
            clickedIds: new Set(),
            basicInformationData: {},
            tags: [],
            toDoQuantity: 0,
            uploadFileNames: []
        }

        this.submitTaskId = this.submitTaskId.bind(this);

    }


submitTaskId ( taskId="" ) {
        const _self = this;
        const selectTaskId = _self.state.selectTaskId;
        console.log("id = ", selectTaskId);
        _self.fetchStateInformation(selectTaskId)
    }

<BasicInformation
    basicInformationData = { basicInformationData }
    submitTaskId = { this.submitTaskId }
    getTaskId = { _self.state.selectTaskId }
    isAdmin = { _self.state.isAdmin }
/>

I rewrote the original BasicInformation component as follows

App.js

import React from "react";
import BasicInformationContainer from "./containers/BasicInformationContainer"
import "./assets/styles/index.less";

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tags: [], // 
            videoLength: 0,
            videoSize: 0,
            distanceCreationTime: 0
        };
    }

    render() {

        const _self = this;
        const isAdmin = _self.props.isAdmin;
        return (
            <div className={"basic_information_div"}>
                {/*<AddTodo />*/}
                {/*<VisibleTodoList />*/}
                {/*<Footer />*/}
                <BasicInformationContainer
                />


            </div>
        )
    }

    componentDidMount =()=> {

        const _self = this;

    }

}

export default App;

BasicInformationContainer.js

import React from "react";
import { connect } from "react-redux";
import BasicInformation from "../components/index";
import { toggleToChange } from "../../../../../actions";
import { DifferentLabelsFilters } from "../../../../../actions";

const getDifferent = (todos, filter) => {

    let return_todos = "";

    switch (filter) {
        case DifferentLabelsFilters.SHOW_ALL:
            return_todos = todos;
            console.log("BasicInformationContainer return_to_dos = ", return_todos)
            return return_todos;
        case DifferentLabelsFilters.SHOW_COMPLETED:

            return todos.filter(t => t.completed)
        case DifferentLabelsFilters.SHOW_ACTIVE:
            return todos.filter(t => !t.completed)
        default:
            throw new Error("Unknown filter: " + filter)
    }
}

const showAdmin = (showAdmin) => {
    return showAdmin;
}

const mapStateToProps = state => {

    console.log("BasicInformationContainer state = ")
    return {
        showDifferent: getDifferent(state.showDifferent, state.differentLabelsFilter),
    }
}

const mapDispatchToPropsReview = (dispatch) => {

    const _self = this;

    //console.log("BasicInformationContainer mapDispatchToPropsReview ===", _self.props)

    //console.log("******************* dispatch ===", dispatch)

    return {
        toggleToChangeBasicInformation: id => dispatch(toggleToChange(id)),
        toggleToSubmitTaskId: id => _self.props.submitTaskId(id),
    }
};

export default connect(
    mapStateToProps,
    mapDispatchToPropsReview
)(BasicInformation);

because my BasicInformationContainer.js is written in this way, I can"t pass props, and then I don"t know how to pass the submitTaskId method to the BasicInformation component

.
May.22,2021

doesn't understand what you mean. Do you want to bind all the action and reducer state of the redux set to props, and pass them to the subcomponents for use?


_ self.props.submitTaskId (id) Why should you write props.
you should import the submitTaskId method from action, and then write it, probably in the following form

import {submitTaskId} from './action'; action
....
mapDispatchToProps = (dispatch) => ({
    toggleToSubmitTaskId: id => dispatch(submitTaskId(id))
})
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(BasicInformation);

of course, the last sentence can be written like this

export default connect(
    mapStateToProps,
    { toggleToSubmitTaskId:submitTaskId }
)(BasicInformation);
Menu