Question

我有一个计数器组件，一个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;

最后是action.js文件

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

<Counter  increaseCount={increaseCount}
           decreaseCount={decreaseCount}
           countValue={countValue} 
                />

我也有index.js与

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

我相信我需要用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;

Answer 1

由于以下increaseCount中未定义变量decreaseCount，countValue和actions.js，您将收到以下错误消息：

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

export default () => (
    /**
     * The syntax someProp={someValue} translates to "I have a variable named 
     * someValue and I would like to set someProp equal to someValue." In your 
     * case, however, your variables that you are trying to pass as props, your 
     * someValues, are not defined.
     */
    <Counter
        increaseCount={increaseCount}
        decreaseCount={decreaseCount}
        countValue={countValue}
    />
);

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

完全删除Actions.js
从App.js导入连接的组件
将连接的组件嵌套在<Provider>

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")
);

作为回应： “我还需要多个独立的实例来处理从API提取的计数器组件和数据”

我认为对所有独立的Counter组件使用一个通用count变量不是正确的方法。您将需要为每个单独的Counter组件创建单独的count变量。除此之外，您很可能需要一个唯一的标识符，例如id，才能将Counter组件与其当前计数相关联。

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

将组件连接到商店

1 个答案: