React 使用 redux 操作在自己的模块中不起作用答案

【问题标题】：React use redux action don't work In own moduleReact 使用 redux 操作在自己的模块中不起作用
【发布时间】：2016-08-19 07:23:19
【问题描述】：

这是我的 util 模块，当我使用 redux 操作时它不起作用。

import {openloading} from '../actions/loading'
export default function (e) {
    openloading(e.font);
}

但在我的 react 组件中它确实有效

【问题讨论】：

你需要调度这个动作，有不同的方法可以从你的组件中访问dispatch()，阅读stackoverflow.com/a/34458710/1744768
您不能简单地在组件中导入和使用操作，您需要将其连接到容器中的 redux，然后操作作为道具传递。我更喜欢mapDispatchToProps

标签： javascript reactjs action redux

【解决方案1】：

动作本身什么都不做，这个名字很讽刺。动作仅描述将要发生的事情以及状态将如何变化。当这些指令被发送到 reducer 时，实际发生了变化。正如 Paul 所说，您需要访问 dispatch 方法。

通常，您从组件中调用 util 模块函数。在这种情况下，您可能希望将调度方法作为参数传递。

import { openloading } from '../actions/openloading'

export const myFn = (e, dispatch) => {
  dispatch(openloading(e.font))
}

你的组件应该像这样连接到 Redux：

import React from 'react'
import { connect } from 'react-redux'
import { myFn } from 'somewhere'

const myComponent = ({ dispatch }) => {

  myFn(e, dispatch)

  return (
    <div>
      { ...whatever }
    </div>
  )
}

const mapStateToProps = (state) => {
  return { ...stuff }
}

const mapDispatchToProps = (dispatch) => {
  return {
    dispatch: dispatch
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(myComponent)

请注意，dispatch 是作为 mapDispatchToProps 中的 prop 传递给组件的。

【讨论】：