javascript - mapDispatchToProps 中的链接粗箭头让我出错

Question

Error: Actions must be plain objects. Use custom middleware for async actions.

我试图在 mapDispatchToProps 中链接粗箭头函数，但它似乎不起作用。

容器和 Action 创建者:

// Actions Creator
const inputChange = (name: string) => (
  e: React.FormEvent<HTMLInputElement>
) => ({
  type: INPUT_CHANGE,
  name,
  value: e.currentTarget.value
});

// Dispatch
const mapDispatchToProps = {
  inputChange
};

// Connect
export default connect(
  mapStateToProps,
  mapDispatchToProps
)(SignUp);

dumb组件

const SignUp = ({ inputChange }) => (
  <input
    type="password"
    placeholder="Password"
    onChange={inputChange('password')}
  />
);

也许这段代码的某些部分看起来有点奇怪，因为我删除了一些 types 以避免添加额外的无意义代码。

无论如何，错误来自 mapDispatchToProps，使用单个粗箭头似乎没问题，但是当我开始链接它们时，我收到此错误(即使它们返回一个对象)。

Answer 1

由于提到的错误 actions 必须是普通对象，但是当您链接函数时，您实际上传递的是 function (链上的下一个)而不是对象。

这里的问题是，除了实际的 DOM 事件之外，您还想传递一个额外的参数，例如 input 的名称，即:“password "、"用户"等...

那为什么不直接给 input 一个名字，然后在 action creator 函数中获取它(就像你对 value 属性所做的那样)。

你的表单看起来像这样:

const Form = ({ inputChange, form }) => (
<div>
  <input name="user" onChange={inputChange} type="text" value={form.user} />
  <input name="password" onChange={inputChange} type="password" value={form.password} />
</div>
);

const mapState = state => ({
  form: state
});

const mapDispatch = {
  inputChange
};

const ConnectedForm = connect(
  mapState,
  mapDispatch
)(Form);

在你的 action creator 中:

const inputChange = ({ target }) => ({
  type: INPUT_CHANGE,
  payload: {
    value: target.value,
    inputName: target.name
  }
});

你的 reducer 可以处理它，像这样:

const reducer = (state = {user: '', password: ''}, action) => {
  switch (action.type) {
    case INPUT_CHANGE: {
      const { inputName, value } = action.payload;
      return {
        ...state,
        [inputName]: value
      };
    }

    default:
      return state;
  }
};

运行示例:

// mimic imports
const { createStore } = Redux;
const { Provider, connect } = ReactRedux;


const INPUT_CHANGE = "INPUT_CHANGE";
const reducer = (state = {user: '', password: ''}, action) => {
  switch (action.type) {
    case INPUT_CHANGE: {
      const { inputName, value } = action.payload;
      const nextState = {
        ...state,
        [inputName]: value
      };
      console.clear();
      console.log('store', nextState);
      return nextState;
    }

    default:
      return state;
  }
};

const inputChange = ({ target }) => ({
  type: INPUT_CHANGE,
  payload: {
    value: target.value,
    inputName: target.name
  }
});

const store = createStore(reducer);

const Form = ({ inputChange, form }) => (
<div>
  <input name="user" onChange={inputChange} type="text" value={form.user} />
  <input name="password" onChange={inputChange} type="password" value={form.password} />
</div>
);

const mapState = state => ({
  form: state
});

const mapDispatch = {
  inputChange
};

const ConnectedForm = connect(
  mapState,
  mapDispatch
)(Form);

class App extends React.Component {
  render() {
    return (
      <div>
        <ConnectedForm />
      </div>
    );
  }
}

const root = (
  <Provider store={store}>
    <App />
  </Provider>
);

const rootElement = document.getElementById("root");
ReactDOM.render(root, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.1/redux.min.js
"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/4.4.10/react-redux.min.js"></script>
<div id="root"/>