javascript 要么将根组件包装在 <Provider> 中，要么将“store”作为道具显式传递给“Connect(CharacterList)

Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(CharacterList)

提问by kasim521

I am trying to test my React "supersquadapp" and getting the following error.

我正在尝试测试我的 React “supersquadapp”并收到以下错误。

Uncaught Error: Could not find "store" in either the context or props of "Connect(CharacterList)". Either wrap the root component in a , or explicitly pass "store" as a prop to "Connect(CharacterList)".

未捕获的错误：无法在“Connect(CharacterList)”的上下文或道具中找到“store”。要么将根组件包装在 a 中，要么将“store”作为道具显式传递给“Connect(CharacterList)”。

characterlist.js

字符列表.js

import React, { Component } from 'react';
import { connect } from 'react-redux';

class CharacterList extends Component {
    render() {
        console.log('this.props', this.props);
        return (
            <div>
                <h4>characters</h4>
            </div>
        )
    }

}
function mapStateToProps(state) {
    return {
        characters: state.characters
    }
}

export default connect(mapStateToProps, null)(CharacterList);

app.js

应用程序.js

import React, {Component} from 'react';
import CharacterList from './CharacterList';

class App extends Component {
    render() {
        return (
            <div>
                <h2>SUPER SQUAD</h2>
                <CharacterList />
            </div>
        )
    }
} 
export default App;

index.js

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './Components/App';

import { createStore } from 'redux';
import { Provider } from 'react-redux';

import rootReducers from './reducers';
import { addCharacterById } from './actions';


const store = createStore(rootReducers);
console.log(store.getState());
store.subscribe(() => console.log('store',store.getState()))
store.dispatch(addCharacterById(3));

ReactDOM.render(
    <Provider>
        <App />
     </Provider>
    ,document.getElementById('root')
)

character.js(in reducers folder)

character.js（在reducers文件夹中）

import characters_json from '../Data/characters.json';
import { ADD_CHARACTER } from '../actions';

function characters(state = characters_json, action) {
    switch(action.type) {
        case ADD_CHARACTER:
        let characters = state.filter(item => item.id !== action.id);
        return characters;
        default:
            return state;
    }
}
export default characters;

heroes.js(reducers folder)

hero.js（reducers 文件夹）

import { ADD_CHARACTER } from '../actions';
import {createCharacter} from './helper';

function heroes(state = [], action) {
    switch(action.type) {
        case ADD_CHARACTER:
        let heroes = [...state, createCharacter(action.id)];
        return heroes;
        default:
        return state;
    }
}
export default heroes;

helper.js(reducers folder)

helper.js（reducers 文件夹）

import characters_json from '../Data/characters.json';

export function createCharacter(id) {
    let character = characters_json.find(c => c.id === id);
    return character;
}

index.js(reducers folder)

index.js（reducers 文件夹）

import { combineReducers } from 'redux';
import characters from './characters_reducer';
import heroes from './heroes_reducer';


const rootReducer = combineReducers({
    characters,
    heroes
})
export default rootReducer;

index.js(action folder)

index.js（动作文件夹）

export const ADD_CHARACTER = 'ADD_CHARACTER';

export function addCharacterById(id) {
    const action = {
        type:ADD_CHARACTER,
        id
    }
    return action;
}

The above error occurred in the component:

上述错误发生在组件中：

in Connect(CharacterList) (at App.js:9)

在 Connect(CharacterList)（在 App.js:9）

in div (at App.js:7)

在 div 中（在 App.js:7）

in App (at index.js:19)

在应用程序中（在 index.js:19）

in Provider (at index.js:18)

在提供者中（在 index.js:18）

please help me...?

请帮我...？

采纳答案by alechill

You must pass the store instance to Provider...

您必须将商店实例传递给 Provider...

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

回答by rrd

If you are running a test and you have something like alechill's answer, you'd need this to change in the test, for example:

如果您正在运行测试并且您有类似 alechill 的答案，则您需要在测试中更改此内容，例如：

let mockedStore = configureStore([])({});
test('some test', () => {
  const wrapper = mount(<SomeComponent foo="bar" />, {
    context: { store: mockedStore },
    childContextTypes: { store: PropTypes.object.isRequired }
  });
  expect(.... your tests here);
});