After learning why redux, writes components like this, you can't get dispach in props.

I want to add a mapDispatchToPropsReview, to this component, but I can"t get it in props

.

main file

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

May.22,2021

the following is the full signature of the connect function

connect([mapStateToProps], [mapDispatchToProps], [mergeProps], [options])
  • Parameter 1 is mapStateToProps , which maps state to props ,
  • Parameter 2 is mapDispatchToProps , which maps dispatch to props , so the containers/SetReview.js file can try this:

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

paste the reducer out. showDifferentTas this file..

Menu