Question

我正在尝试为应用程序设置商店，我无法将商店连接到组件。我已经看过官方的例子，但不知道我哪里出错。

Cannot read property 'app' of undefined

在app.js中，state未定义，我的理解是Provider将其传递下去。我不确定我是否忽视了一些简单但我目前难倒的事情。

编辑：我现在已经添加了所有涉及的文件。

root.js

import React, { Component } from 'react';
import { Provider } from 'react-redux';
import configureStore from '../configureStore';
import App from './app';

const store = configureStore();

export default class Root extends Component {
  render() {
    return(
      <Provider store={store}>
        <App />
      </Provider>
    )
  }
}

app.js

import React, { Component, PropTypes } from 'react';
import {render} from 'react-dom';
import { connect } from 'react-redux';
import { fetchFixtures } from '../actions';

const mapStateToProps = (state) => {
  return {
    fixtures: state.app.fixtures
  }
}

class App extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    const { dispatch, selectedSubreddit } = this.props;
  }

  render() {
    return(
      <div></div>
    )
  }
}

export default connect(mapStateToProps)(App);

configureStore.js

import {createStore} from 'redux';
import Reducer from './reducers';

let initialState = {
  app: {
    teams: [],
    fixtures: [],
    manifesto: []
  }
}

export default function configureStore(initialState) {
  return createStore(
    Reducer,
    initialState
  )
}

actions.js

export function fetchFixtures(url) {
  return fetch(url)
    .then(res => res.json())
    .then(json => dispatch(recieveFixtures(json)))
    .catch((err) => {
      console.log(err);
    });
}

function recieveFixtures(json) {
  return {
    type: ADD_FIXTURES,
    fixtures: json.fixtures.map(fixture => fixture)
  }
}

reducers.js

function euroSweep(state, action) {
  switch (action.type) {
    case 'ADD_FIXTURES':
      let newState = Object.assign({}, state);
      return newState;
    default:
      return state;
  }
}

export default euroSweep;

index.js

import React, {Component} from 'react';
import {render} from 'react-dom';
import Root from './containers/root';

render(
  <Root />, document.querySelector('.app')
)

React Redux将状态连接到道具

0 个答案: