javascript - React/redux 具有相同容器的多个组件

Question

我是这个技术栈的新手，但我对某些事情感到困惑:

我有一个 react 容器来处理应在应用程序中向用户显示的 View :

const mapStateToProps = (state) => {
  return {
    currentScreen: state.currentScreen
  }
}

并处理应用何时应更改当前屏幕:

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

但是是“已连接”connect()仅适用于 App 组件:

import App from '../components/App'

const AppScreen = connect(
  mapStateToProps,
  mapDispatchToProps
)(App)

如何与所有组件共享 changeScreen 函数？

Answer 1

创建一个新文件 actions.js，这样就可以从任何地方调用这个 Action 。 例如:

export function changeScreen(newScreen){
    return({
        your code here....
    });

}

现在在您的 APP 组件中(或者您可以从任何其他组件共享)

import { changeScreen } from './actions';
import { bindActionCreators } from 'redux';

并使用 bindActionCreators 进行分派(dispatch)

function mapDispatchToProps(dispatch){
  return bindActionCreators({ changeScreen }, dispatch);
}

希望这对您有所帮助!