初学redux，在使用redux的时候，如何才能像使用props一样传递submitTaskId函数

Question

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 }
/>

我把原来的BasicInformation组件重新写了一下，如下

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);

因为我的BasicInformationContainer.js是这么写的，所以无法传递props了，然后我就不知道怎么把submitTaskId这个方法，传给BasicInformation组件了

Answer 1

没明白你的意思，你是想把redux这一套里面所有的action和reducer的state绑定到props，然后传递到子组件使用？

Answer 2

_self.props.submitTaskId(id) 为什么要写props...
应该是从action中导入submitTaskId这个方法，然后写入，大概是下面的形式

import {submitTaskId} from './action'; 从某个action中导入
....省略一堆代码
mapDispatchToProps = (dispatch) => ({
    toggleToSubmitTaskId: id => dispatch(submitTaskId(id))
})
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(BasicInformation);

当然最后一句可以这么写

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