Даже после включения корневого компонента в функцию провайдера. Все еще компонент не может получить доступ к данным? - PullRequest
Новая
       7

Даже после включения корневого компонента в функцию провайдера. Все еще компонент не может получить доступ к данным?

0 голосов
/ 05 июля 2019

Не удалось найти «store» в контексте «Connect (Tetromino)». Либо оберните корневой компонент в a, либо передайте пользовательский поставщик контекста React соответствующему получателю контекста React в Connect (Tetromino) в параметрах соединения.

Даже включение корневого элемента в функцию провайдера все еще не может решить проблему.

Tetromino.js предназначен для реализации функции и отрисовки каждого тетромино. 

------index.js
-----Components
----------App.js
----------Tetromino.js
----------CurrentTetromino.js
----------Gamefield.js
Tetromino.js
import React from 'react';
import constants from '../gameConstants/constants.js';
import { Group,Rect } from 'react-konva';
const {blockUnit}= constants;

const Tetromino=({shape,offsetX,offsetY,color})=>{
    const coordinates=getCoordinates(shape);
    const xs=coordinates.map((coord)=>coord.x*blockUnit+offsetX);
    const ys=coordinates.map((coord)=>coord.y*blockUnit+offsetY);
    return (
        <Group>
            {tertrominoGroup(xs,ys,color)}\\Some implementation
        </Group>
    );
};
export default Tetromino;
currentTetromino is a reducer which provides all the values
Current Tetromino.js
import {connect} from 'react-redux';
import Tetromino from './Tetromino';
const mapStateToProps = ({ currentTetromino }) => ({
    shape: currentTetromino.shape,
    name: currentTetromino.name,
    color: currentTetromino.color,
    offsetX: currentTetromino.offsetX,
    offsetY: currentTetromino.offsetY,
});
const CurrentTetromino=connect(
    mapStateToProps
)(Tetromino);
export default CurrentTetromino;

GameField.js
import React from 'react';
import {Layer,Stage} from 'react-konva';
import {connect} from 'react-redux';
import '../css/style.css';
import constants from '../gameConstants/constants.js';
import CurrentTetromino from './CurrentTetromino';
const {fieldHeight,fieldWidth}= constants;
let GameField=({isPlaying,isPaused,isGameOver})=>{
    if(isPlaying){
        return (
            <div style={{display:'inline'}}>
                <div className="gameField">
                    <Stage width={fieldWidth} height={fieldHeight}>
                        <Layer>
                            <CurrentTetromino/>
                        </Layer>
                    </Stage>
                </div>
            </div>
        );
    }
    return null;
}
const mapStateToProps=({gameStatus})=>({
    isPlaying: gameStatus.currentState !== 'IDLE',
    isPaused: gameStatus.currentState === 'PAUSE_GAME',
    isGameOver: gameStatus.currentState === 'GAME_OVER',
});
export default connect(mapStateToProps)(GameField);

Gamefield component is for Tetris game arena.
App.js
class App extends Component {
    render() {
        return (
            <>
                <Menu/>
                <div style={{position: 'relative'}}>
                    <GameField/>
                    <GameInfo/>
                </div>           
            </>
        )   
    }
}


index.js
const store=createStore(
    reducers,
    composeEnhancers(applyMiddleware(thunk))
);
ReactDOM.render(
    <Provider store={store}>
        <App/>
    </Provider>,document.querySelector('#root'));

// Редукторы: 

function currentTetrominos(state={},action){
    console.log(action);
    switch(action.type){
        case 'START_GAME':
        return {
            shape: tetrominos[action.current_Shape].shape,
            name: action.currentRandomShape,
            color: tetrominos[action.current_Shape].color,
            offsetX: blockUnit * 3,
            offsetY: 0,
        };
        default:
            return state;

    }
}

Действие: 

    export const startGame=()=>dispatch=>{
        const {shapesMapping}=constants;
        const current_Shapeno=Math.floor(Math.random()*7);
        const next_Shapeno=Math.floor(Math.random()*7);
        const current_Shape=shapesMapping[current_Shapeno];
        const next_Shape=shapesMapping[next_Shapeno];
        console.log(current_Shape);
        console.log(next_Shape);
        dispatch({
            type:"START_GAME",
            current_Shape:current_Shape,
            next_Shape:next_Shape
        });

}
...