Question

我整理了一个简单的组件，试图了解一些React和Redux概念。

我现在正试图将Redux逻辑分离成一个单独的组件，因此总共有两个组件。

当我尝试编译时，NewComponent中的所有方法/对象都是未定义的。当我使用this添加上下文时，我会遇到相同的错误。

在尝试将Redux方法/对象放入单独的组件之前，下面是我的原始组件（工作正常）。

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { createStore, combineReducers } from 'redux'
import { Provider, connect } from 'react-redux'


const incrementAction = {
  type: 'INCREMENT',
  value: 1
}

const decrementAction = {
  type: 'DECREMENT',
  value: 1
}

function reducer(state = 0, action) {
  if (action.type === 'INCREMENT') {
    return state + 1
  } else if (action.type === 'DECREMENT'){
    return state - 1
  } else {
    return state
  }
}

// Map Redux state to component props
function mapStateToProps(state) {
  return {
    value: state
  }
}

// Map Redux actions to component props
function mapDispatchToProps(dispatch) {
  return {
    onIncrementClick: () => dispatch(incrementAction),
    onDecrementClick: () => dispatch(decrementAction)
  }
}


const store = createStore(reducer)



class View extends Component {

  showState() {
      console.log(store.getState())
  }


  render() {

    const { value, onIncrementClick, onDecrementClick } = this.props

    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title"></h1>
        </header>

      <h2>Counter</h2>

      <div onClick = {onIncrementClick}> <p className="button"> + </p></div>
      <div onClick = {onDecrementClick}> <p className="button"> - </p></div>
      <div onClick = {this.showState}> <p className="button"> Show State </p></div>

    </div>
    );
  }
}

View = connect(
  mapStateToProps,
  mapDispatchToProps
)(View)


const WrappedApp = () => (
  <Provider store={store}>
    <View />
  </Provider>
);

export default WrappedApp;

修改

以下是我尝试分解上述内容后的组件。

NewComponent：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { createStore, combineReducers } from 'redux'
import { Provider, connect } from 'react-redux'


class NewComponent extends Component {

  constructor(props){
    super(props)

    const incrementAction = {
      type: 'INCREMENT',
      value: 1
    }

    const decrementAction = {
      type: 'DECREMENT',
      value: 1
    }

    const store = createStore(reducer)

  }



  reducer(state = 0, action) {
    if (action.type === 'INCREMENT') {
      return state + 1
    } else if (action.type === 'DECREMENT'){
      return state - 1
    } else {
      return state
    }
  }

  // Map Redux state to component props
  mapStateToProps(state) {
    return {
      value: state
    }
  }

  // Map Redux actions to component props
  mapDispatchToProps(dispatch) {
    return {
      onIncrementClick: () => dispatch(incrementAction),
      onDecrementClick: () => dispatch(decrementAction)
    }
  }

}


export default NewComponent;

View：

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import { createStore, combineReducers } from 'redux'
import { Provider, connect } from 'react-redux'
import NewComponent from './NewComponent'


class View extends Component {

  showState() {
      console.log(this.store.getState())
  }

  render() {

    const { value, onIncrementClick, onDecrementClick } = this.props

    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title"></h1>
        </header>

      <h2>Counter</h2>

      <div onClick = {onIncrementClick}> <p className="button"> + </p></div>
      <div onClick = {onDecrementClick}> <p className="button"> - </p></div>
      <div onClick = {this.showState}> <p className="button"> Show State </p></div>

    </div>
    );
  }
}

View = connect(
  this.mapStateToProps,
  this.mapDispatchToProps
)(View)

const WrappedApp = () => (
  <Provider store={this.store}>
    <View />
  </Provider>
);

export default WrappedApp;

我现在要：

Could not find "store" in either the context or props of "Connect(View)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(View)".

Answer 1

我打赌你有OOP语言的技术背景，对吧？：）

React $("img:not(.logo)").addClass("class_two");基本上是一个负责在屏幕上呈现内容的函数。如果要组织与Redux相关的代码，则不必将其包装在React Component中。只需在单独的文件中声明所需的功能和对象，然后使用JavaScript module import/export feature。

然后，您可以按照guidelines from Redux了解如何整理Redux代码。

例如，对于您的Redux商店，您最终可以获得包含

之类的Component文件

store.js

然后只需导入它就可以在任意位置使用

...
export const store = createStore(reducer);
...

Answer 2

在将代码拆分为两个文件后，您不应该像定义商店一样两次。并且您定义的组件不是真正的组件。而这些只是两件不太好的事情......

我认为开始构建react / redux项目的一个好方法是修复上面的代码。未来将为您服务的更好方法如下：

首先，下载一个基本的redux代码示例。我推荐的是ReduxSimpleStarter。这是如何在redux项目中组织文件夹树的一个很好的例子。
查看完上述示例后，使用create-react-app创建一个新项目，运行它，然后根据redux示例开始修改它。

使用Redux方法导入React组件

2 个答案: