Reactjs 将组件连接到存储

我有一个计数器组件，一个app.js文件和一个reducer。 但我无法连接到商店，而且我有些东西没有

App.js

import { connect } from 'react-redux'
import Counter from './components/Counter';


// export default Counter;

function mapStateToProps(state) {
  return {
      countValue: state.count
  };
}

//Action

var increaseAction = { type:"increase" }
var decreaseAction = { type:"decrease" }

// Map Redux actions to component props.

function mapDispachToProps(dispach) {
  return {
      increaseCount: function() {
      return dispach(increaseAction);
      },
      decreaseCount: function() {
      return dispach(decreaseAction)
      }
  }
}

// The HOC aka Hight Order Componenets
var connectedComponent = connect (
  mapStateToProps,
  mapDispachToProps
)(Counter);

export default connectedComponent;

然后我有了counter.js

import React, { Component } from 'react';

class Counter extends Component {
    render() {
        return(
            <div className="container">
                <button onClick={this.props.decreaseCount}> - </button>
                <span> {this.props.countValue} </span>
                <button onClick={this.props.increaseCount}> + </button>
            </div>
        )
    }
}

export default Counter;

我相信我需要用redux connect包装，但我不知道如何包装。也许它会纠正这些错误

reduce.js：

function counter(state, action) {
    if (state === undefined) {
        return { count: 0 };
    }

    var count = state.count;

    switch (action.type) {
        case "increase":
            return { count: count +1 }
        case "decrease":
            return { count: count -1 }
        default:
            return state;
    }
}

export default counter;

---

您收到以下错误消息，因为变量

递增计数

、

递减计数

和

计数值

未在

操作中定义。js

：

import React，{Component}来自'React'；
从“./Counter”导入计数器；
从“./App”导入应用程序；
导出默认值（）=>(
/**
*语法someProp={someValue}转换为“我有一个名为
*someValue，我想将someProp设置为等于someValue
*然而，在这种情况下，您试图作为道具传递的变量
*有些值未定义。
*/
);

---

您可以通过以下方式解决此错误并使组件连接到Redux存储：

完全删除

Actions.js

从

App.js

将连接的组件嵌套在

从“React”导入React；
从“react dom”导入react dom；
从“redux”导入{createStore}；
从'react redux'导入{Provider}；
从“/reducer”导入reduceCounter；
导入“./index.css”；
从“./components/Actions.js”导入操作//删除此
从“path to App.js”导入ConnectedApp；//导入App.js
//将*作为serviceWorker从“/serviceWorker”导入；
var store=createStore（reduceCounter）；
ReactDOM.render(
//将连接的组件放在此处
，document.getElementById（“根”）
);

---

响应：“我还需要多个独立实例，用于计数器组件和从API获取的数据”

我不认为为所有独立计数器组件提供一个通用

count

变量是正确的方法。您需要为每个计数器组件创建单独的

count

变量。除此之外，您很可能需要一个唯一的标识符，例如

id

，以将计数器组件与其当前计数关联起来

---

对于从API获取的数据，可以将其用作Redux存储的中间件。该中间件扩展了商店处理异步操作的能力

您正试图将变量

递增计数

、

递减计数

和

计数值

作为计数器组件的道具传递到

actions.js

。这些变量未在文件中定义，因此会导致该错误。您可以将

App.js

中连接的组件导入

index.js

并将其嵌套在Redux的提供者组件中。您的

MapStateTrops

和

mapDispatchToProps

将把变量作为道具传递给计数器组件。这似乎就是我要做的。你能发布一个完整的答案吗？谢谢你的回答。尽管我还需要多个独立的实例，用于计数器组件和从Actions.js中的API获取的数据，您建议将其删除。我应该如何看待这方面的代码？您可以为您的

reduceCounter

发布您的代码吗？关于我关于删除

Actions.js

的建议，我之所以说要删除它，是因为您发布的代码是多余的。你在

App.js

和

counter.js

中的代码应该足以让Redux成功连接到你的计数器组件。我添加了减速机。商店现在正在连接，但当我在柜台上添加或删除投票时，它们不是独立的，并且具有相同的价值。我更新了我的答案，并考虑了您的情况。感谢您更新答案。我将根据你的建议尽力做这件事。

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import reduceCounter from './reducer';
import './index.css';
import Actions from './components/Actions.js'
// import * as serviceWorker from './serviceWorker';

var store = createStore(reduceCounter);

ReactDOM.render(
    <Provider store={store}>
        <Actions> </Actions>
    </Provider>, document.getElementById("root"));

./src/components/Actions.js
  Line 35:40:  'increaseCount' is not defined  no-undef
  Line 36:40:  'decreaseCount' is not defined  no-undef
  Line 37:37:  'countValue' is not defined     no-undef

function counter(state, action) {
    if (state === undefined) {
        return { count: 0 };
    }

    var count = state.count;

    switch (action.type) {
        case "increase":
            return { count: count +1 }
        case "decrease":
            return { count: count -1 }
        default:
            return state;
    }
}

export default counter;

import React from 'react';
import ReactDOM from 'react-dom';
import {createStore} from 'redux';
import {Provider} from 'react-redux';
import reduceCounter from './reducer';
import './index.css';
import Actions from './components/Actions.js' // Remove this
import ConnectedApp from 'path to App.js'; // Import App.js

// import * as serviceWorker from './serviceWorker';

var store = createStore(reduceCounter);

ReactDOM.render(
    <Provider store={store}>
        <ConnectedApp /> // Place your connected component here
    </Provider>, document.getElementById("root")
);