鍍金池/ 問答/網絡安全  HTML/ 初學redux,在使用redux的時候,如何才能像使用props一樣傳遞subm

初學redux,在使用redux的時候,如何才能像使用props一樣傳遞submitTaskId函數

constructor() {
        super();
        this.state = {
            showPageGroup: [],
            current: 0,
            showPageNumber: 0, // 總用多少分頁
            currentShowPage: 0, // 獲取當前頁面頁數
            selectTaskId: [], // 多選的任務ID
            preSelTaskIdQuantity: 0, // 記錄每次多選前的狀態(tài)
            currentClickPage: 0, // 控制分頁按鈕顏色,獲取點擊頁面索引
            ellipsisNumber: 0, // 省略號的數量
            showBorderColor: -1,
            ellipsisPosition: 'behind',
            startGetIndex: 0, // 獲取數據區(qū)間 - 開始
            endGetIndex: 0, // 獲取數據區(qū)間 - 結束
            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組件了

回答
編輯回答
臭榴蓮

_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);
2017年8月28日 12:38
編輯回答
法克魷

沒明白你的意思,你是想把redux這一套里面所有的actionreducer的state綁定到props,然后傳遞到子組件使用?

2018年6月25日 05:34