Redux行为不正确

Question

I just learned a little of react-redux and stuck at such problems I cannot understand and fix at least 4 days long.

1. First of the problem stands and can be seen at inspectors console (I use Chrome). I have event handler at <div> inside react component. It have to be called at onClick event but it triggers at each load or reload of site.

2. Second, stands somewhere near reducer's function. It says me in console (dev tools) that reducers received action 'TOGGLE_TILE' and returned undefined instead of object. Should notice that reducer successfully receives state, action properties and makes some operations inside but as result nothing normal returnes.

   The code of my reducer, actions, main, container, presentation components and functions provide. Please answer expanded as you can, i want to understand whats wrong and not make this mistake inside code twice.

ALSO! I using redux-thunk middleware (to functional callbacks inside actions, you know). Inside i have:

index.js - main component

const store = createStore(reducer, applyMiddleware(thunk));

ReactDOM.render(
    <Provider store={store}>
        <AppContainer />
    </Provider>, 
    document.getElementById('root')
);
registerServiceWorker();

actions.js

export function toggle(id){
    return{
        type: 'TOGGLE_TILE',
        id
    };
}

export function toggleTile(id){
    return dispatch => {
        console.log('toggling');
        dispatch(toggle(id));
    };
}

tiles.js - Reducer

var i = 0;

function tiles(state = tilesContainer, action){
    var openedTiles = [];
    switch (action.type) {
        case 'TOGGLE_TILE':
            if(i < 2){  
                console.log('i: '+i);  
                state.map((value) => {
                    var newOpen;
                    if(!value.opened && action.id === value.id){  
                        newOpen = Object.assign({}, value, {
                            opened: !value.opened
                        });  
                        openedTiles.push(newOpen);
                        i++;
                        console.log(i, value.opened, newOpen, openedTiles);
                    }
                    return newOpen, i;
                });
            }else if(i === 2){
                var curr, prev;
                openedTiles.map((value) => {
                    if(!prev){
                        prev = value;
                    }else{
                        curr = value;
                        console.log("Prev and curr: "+prev, curr);
                        if(curr.name === prev.name){
                            var currRes = Object.assign({}, curr, {
                                disappeared: !curr.disappeared
                            });
                            var prevRes = Object.assign({}, prev, {
                                disappeared: !prev.disappeared
                            });
                            return {currRes, prevRes}; 
                        } else {
                            let currRes = Object.assign({}, curr, {
                                opened: !curr.opened
                            });
                            let prevRes = Object.assign({}, prev, {
                                opened: !prev.opened
                            })
                            return currRes, prevRes;
                        }
                    }
                });
            }else{
                return state;
            }
        default:
            return state;
    }
    console.log("tiles: "+state.forEach(value => console.log(value)));
}



const reducers = combineReducers({
    tiles
});

export default reducers;

AppContainer.jsx

const mapStateToProps = (state) => {
  return {
    tiles: state.tiles
  };
};

const mapDispatchToProps = (dispatch) => {
  return {
    toggle: id => {
      // console.log(id);
      dispatch(toggleTile(id));
    }
  };
};


class AppContainer extends Component {
  constructor(props){
    super(props);
  }
  componentDidMount(){

  }
  render() {
    var prop = this.props;
    console.log(prop);
    return (
      <div>
        <AppView prop={prop} />
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(AppContainer);

AppView.js

class AppView extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            tiles: this.props.prop.tiles,
        };
        this.showTiles = this.showTiles.bind(this);
        this.defineRatio = this.defineRatio.bind(this);
        this.toggleTile = this.toggleTile.bind(this);
    }
    componentDidMount(){
        this.defineRatio();

    }
    componentWillMount(){

    }
    defineRatio(){
        var imgClass;
        let tile = document.querySelectorAll('img');
        tile.forEach((value) => {
            var imgSrc, imgW, imgH;
            function defineImage(imgSrc){
                var img = new Image();
                img.src = imgSrc;
                img.onload = function() {   
                    return {
                        src:imgSrc,
                        width:this.width,
                        height:this.height};
                    };
                return img;
            }
            var x = defineImage(value.src);
            x.addEventListener('load',function(){
                imgSrc = x.src;
                imgW = x.width;
                imgH = x.height;
                // console.log(value.src, imgW, imgH);
                var imgClass = (imgW / imgH > 1) ? 'wide' : 'tall';
                value.classList += imgClass;
            });
        });
    }
    toggleTile(id){
        this.props.prop.toggle(id);
    }
    showTiles(){
        const boxElems = this.state.tiles.map((value, index) => {
            var styles = {background: 'black'};
            var tileState = value.opened ? '' : styles;
            var imgState = value.opened ? 'opened ' : 'closed ';
            var elem = <img key={value.id} src={value.src} alt="" className={imgState} />;
            var boxElem = <div style={tileState} className="tile-box " onClick={this.toggleTile(value.id)} key={index}>{elem}</div>;
            return boxElem;
        });
        return boxElems;
    }
    render(){
        var tiles = this.showTiles();
        return (
            <div className="tiles-box">
                <div className="tiles">
                    {tiles}
                </div>
            </div>
        );
    }
}

export default AppView;

Answer 1

First problem can be solved by replacing

onClick={this.toggleTile(value.id)} with onClick={(e) => this.toggleTile(value.id)} First statement is just invoking this.toggleTile(value.id) immediately and setting the return value to OnClick event.

Regarding second you are not returning any thing from your reducer , hence state is undefined.

       if(i < 2){  
            console.log('i: '+i);  
            state.map((value) => {
                var newOpen;
                if(!value.opened && action.id === value.id){  
                    newOpen = Object.assign({}, value, {
                        opened: !value.opened
                    });  
                    openedTiles.push(newOpen);
                    i++;
                    console.log(i, value.opened, newOpen, openedTiles);
                }
                return newOpen, i;
            });
        }

What is this return newOpen, i it should be return newOpen , also as this return is in a map function you have to return the mapped array as well so use return state.map((value) => {

Answer 2

the problem that you have is that you are actually calling the function inside your div , thus it will get triggered each time you enter the view, so replace the following code on your showTiles()

var boxElem = <div style={tileState} className="tile-box " onClick={this.toggleTile(value.id)} key={index}>{elem}</div>;

to this:

var boxElem = <div style={tileState} className="tile-box " onClick={e => this.toggleTile(value.id)} key={index}>{elem}</div>;

and actually this should fix the error for the point 2.