Question

我创建了一个Rexux商店。在我的入口点，我可以将一个项目添加到我的商店，看看它是否有效：

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { createStore } from 'redux';
    import { Provider } from 'react-redux';
    import allReducers from './reducers';
    import { ADD_TODO_ITEM } from './actionCreators';

    import App from './components/containers/App';

    let store = createStore(allReducers);


    store.subscribe(() => console.log(store.getState()));
    store.dispatch(ADD_TODO_ITEM('test 1'));

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

我试图在我的组件中使用此操作调度程序。当我提交下面的表格时，我收到错误：

TypeError：dispatch不是函数

我认为我没有将调度传递给AddTodo，但是如何将调度传递给组件？

    import React from 'react';
    import { ADD_TODO_ITEM } from '../../actionCreators';

    const AddTodo = ({ dispatch }) => {
      let input;
      return (
        <form
          onSubmit={e => {
            e.preventDefault();
            const text = input.value;
            console.log(text);
            dispatch(ADD_TODO_ITEM(text));
          }}
        >
          <input
            type="text"
            ref={node => {
              input = node;
            }}
          />
          <button type="submit">Add Item</button>
        </form>
      );
    };

    export default AddTodo;

Answer 1

在您的情况下，this.props为空，因为您没有传递任何道具或将您的组件连接到您的redux状态。要在您的组件中进行调度，您需要使用react-redux中的connect，其中包含2个参数，一个为mapStateToProps，另一个为mapDispatchToProps。代码如下：

import React from 'react';
import {connect} from 'react-redux';
import { ADD_TODO_ITEM } from '../../actionCreators';

const AddTodo = ({ addItem }) => {
    let input;
    return (
        <form
          onSubmit={e => {
          e.preventDefault();
          const text = input.value;
          console.log(text);
          dispatch(addItem(text));
          }}
        >
          <input
            type="text"
            ref={node => {
              input = node;
            }}
          />
          <button type="submit">Add Item</button>
        </form>
      );
    };

const mapDispatchToProps = (dispatch) => {
  return {
    addItem: (item) => {
      dispatch(ADD_TODO_ITEM(item));
    }
  }
};

export default connect(undefined, mapDispatchToProps)(AddTodo);

尝试在React组件中使用Redux操作调度程序时出错？

1 个答案: