如何从顶级组件中获取类型函数的道具并在 redux 中使用它答案

【问题标题】：How to take a prop of type function from a top level component and use it in redux如何从顶级组件中获取类型函数的道具并在 redux 中使用它
【发布时间】：2018-07-18 16:36:16
【问题描述】：

所以如果我有一个类似...的应用程序

const App = ({ onEvent }) => 
    <div>
        <SomeComponent>
            <OtherComponent>
                <DeeplyNestedOtherComponent />
            </OtherComponent>
        </SomeComponent>
    </div>

并且 App 被渲染成...

<div>
    <App onEvent={() => { console.log('event')} } />
</div>

在 redux 操作或中间件中访问 onEvent 的最佳方式是什么？我不想通过多个级别的道具传递它

即actions.js

const updateUser = (name, email, description) => dispatch => {
    // How do i get access to this?
    onEvent();

    return dispatch({
        type: "USER_UPDATE",
        payload: {
            name,
            email,
            description,
        },
    });
};

【问题讨论】：

标签： reactjs redux redux-thunk

【解决方案1】：

这里有两个问题。

如何在不通过 props 传递的情况下传递处理函数？
- 在App 中将处理程序添加到上下文中
- 在DeeplyNestedOtherComponent 中从上下文中获取处理程序

见：https://reactjs.org/docs/context.html

一旦DeeplyNestedOtherComponent有了handler，如何在action creator中使用？
- 将处理程序作为参数传递

但是，我认为最好完全避免这种情况。你不能让App 使用connect 对动作的作用（实际上是减速器）做出反应吗？这将避免传递处理程序，而且操作不需要知道处理程序存在。

顺便说一句：我真的不喜欢将处理程序本身存储在 redux 存储中的想法。我喜欢将 redux 存储视为数据存储；不是代码商店。

【讨论】：

【解决方案2】：

在你的 redux store 中设置你的函数，然后通过 action 中的 state 访问它：

const updateUser = (name, email, description) => (dispatch, getState) => {
     getState().myfunctions.onEvent()
     ...
}

【讨论】：

【解决方案3】：

我不确定是否有正确的方法可以做到这一点，但我最近不得不做类似的事情。我的方法是使用App 组件的生命周期方法之一将函数存储在redux 的状态中。

例如：

// actions.js
const storeEvent = (eventFunc) => dispatch => {
  return dispatch({ type: 'STORE_SOME_EVENT', eventFunc });
};

// reducer
const initialState = { eventFunc: '' };
function someReducer(state = initialState, action) {
  switch (action) {
    case 'STORE_SOME_EVENT':
      return {
        eventFunc: action.eventFunc,
      };
  }
}

// component
class App extends Component {
  componentDidMount() {
    // or some other lifecycle
    const { storeEvent, onEvent } = this.props;
    storeEvent(onEvent);
  }
}

并将 storeEvent 函数作为来自 redux 容器的 prop 传递。

那么你可以这样做：

const updateUser = (name, email, description) => (dispatch, getState) => {
    getState().eventFunc()

    return dispatch({
        type: "USER_UPDATE",
        payload: {
            name,
            email,
            description,
        },
    });
};

希望有帮助

【讨论】：

【解决方案4】：

您是否使用 connect 方法将 redux 与您的组件连接？

【讨论】：