Question

所以，如果我有类似...的应用

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,
        },
    });
};

Answer 1

这里有两个问题。

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

请参阅：https://reactjs.org/docs/context.html

一旦DeeplyNestedOtherComponent具有处理程序，该如何在动作创建者中使用？
- 将处理程序作为参数传递

但是，我认为最好完全避免这种情况。您无法使App对使用connect的动作（实际上是减速器）做出反应吗？这样可以避免传递处理程序，并且该动作也不需要知道处理程序的存在。

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

Answer 2

在redux存储中设置功能，然后通过操作中的状态访问它：

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

Answer 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);
  }
}

并从redux容器传递storeEvent函数作为prop。

然后您可以执行以下操作：

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

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

希望有帮助

Answer 4

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

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

4 个答案: