初学redux，为什么这么写组件后，在props里面获取不到dispach

Question

我想给这组件加一个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: [], // 任务所有名称

        };
    }

    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: [], // 任务所有名称
        };
    }

    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,
})

Answer 1

以下是connect函数的完整签名

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])

• 参数1是mapStateToProps，是将state映射到props上，

• 参数2是mapDispatchToProps，才是将dispatch映射到props上，所以containers/SetReview.js文件可以试试这么写：

  export default connect(
      ()=>({}),
      mapDispatchToPropsReview
  )(Review)

Answer 2

把reducer粘贴出来看看。。showDifferentTas这个文件..