鍍金池/ 問答/HTML/ 初學(xué)redux,為什么這么寫組件后,在props里面獲取不到dispach

初學(xué)redux,為什么這么寫組件后,在props里面獲取不到dispach

我想給這組件加一個mapDispatchToPropsReview,但是在props一直無法獲取到

主文件

import React from 'react';
import Review from './components/Review';

import './assets/styles/index.less';

import rootReducer from '../../../../reducers';
import { createStore } from 'redux';
import { Provider } from 'react-redux';

const store = createStore(rootReducer);

class ReviewButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tags: [], // 任務(wù)所有名稱

        };
    }

    render() {

        const _self = this;

        return (
            <Provider store={store}>
                <div>
                    <Review
                        selectTaskId={_self.props.selectTaskId}
                    />
                </div>
            </Provider>
        )
    }

    componentDidMount =()=> {

        const _self = this;

    }

}

export default ReviewButton;

actions/index.js

let nextTodoId = 0;

export const toggleToChange = (id)=> {
    return {
        type: 'TOGGLE_TO_CHANGE',
        id
    }
};

components/Review.js

import React from 'react';
import StorageApi from 'PATH_SRC_UTILS/storageApi';

class Review extends React.Component {
    constructor( props ) {
        super( props );
        this.state = {
            taskTotalNames: [], // 任務(wù)所有名稱
        };
    }

    checkJump() {

        const _self = this;
        let selectTaskId = _self.props.selectTaskId;

        console.log('selectTaskId = ', selectTaskId);
        StorageApi.set('task_list', selectTaskId);

        window.location.href= `./video.html`;
    }

    render() {

        const _self = this;

        let checkButtonStyle = { // 審核按鈕樣式
            // background: 'rgba(71, 129, 255, 1)',
            // height: '34px',
            // width:'90px',
            // color: 'rgba(255,255,255,1)',
            float: 'right',
            cursor:'pointer',
            marginRight: 20
        };

        console.log('審核按鈕組件屬性 === ', _self.props)

        return (
            <div
                style={checkButtonStyle}
                className={'flexCenter table_check_button'}
                onClick={() => _self.checkJump()}
            >
                審核
            </div>
        )
    }

    componentDidMount() {

        const _self = this;

    }

}


export default Review;

containers/SetReview.js

import React from 'react';
import { connect } from 'react-redux';
import Review from '../components/Review';
import {toggleToChange} from '../actions';

const getDifferent = (todos, filter) => {

    let return_todos = '';
}


const mapDispatchToPropsReview = dispatch => ({
    toggleToChange: id => dispatch(toggleToChange(id))
});

export default connect(
    mapDispatchToPropsReview
)(Review)

reducers/index.js

import { combineReducers } from 'redux'
//import todos from './todos'
import showDifferentTask from './showDifferentTask'


export default combineReducers({
    //todos,
    showDifferentTask,
})

圖片描述

回答
編輯回答
情殺

以下是connect函數(shù)的完整簽名

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
  • 參數(shù)1是mapStateToProps,是將state映射到props上,
  • 參數(shù)2是mapDispatchToProps,才是將dispatch映射到props上,所以containers/SetReview.js文件可以試試這么寫:

    export default connect(
        ()=>({}),
        mapDispatchToPropsReview
    )(Review)
2017年2月15日 18:56
編輯回答
毀了心

把reducer粘貼出來看看。。showDifferentTas這個文件..

2018年4月14日 13:42