reactjs - React-Redux:如何从 'anywhere' 访问存储而不导入它？

Question

在react-redux文档中指出，当使用React-redux和connect()时，不建议导入存储。这是一种反模式。

http://redux.js.org/docs/faq/StoreSetup.html

Similarly, while you can reference your store instance by importing it directly, this is not a recommended pattern in Redux. If you create a store instance and export it from a module, it will become a singleton. This means it will be harder to isolate a Redux app as a component of a larger app, if this is ever necessary, or to enable server rendering, because on the server you want to create separate store instances for every request.

With React Redux, the wrapper classes generated by the connect() function do actually look for props.store if it exists, but it's best if you wrap your root component in and let React Redux worry about passing the store down. This way components don't need to worry about importing a store module, and isolating a Redux app or enabling server rendering is much easier to do later.

那么，一旦我将 store 正确连接到我的应用程序？我的代码正确连接 App 但我根本无法从任何子组件访问商店。 store.dispatch() is null，store.getState() is null等等。我觉得这方面的文档缺乏。据说这是魔法，但我想知道如何使用魔法。我是否需要为每个容器组件一次又一次地编写 mapDispatchToProps() ？一个用例是 currentUser 属性，它可用于应用程序中的每个子组件。我想将其从 App 传递给每个 child 。

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);//App is now a connected component, that part is working

在App内部我有一个Login组件，我想在其中调度一个action 。但我需要对 store 的引用，但显然我不应该导入它。

Answer 1

这就是containers的概念所在。发挥作用。

假设您想在 App 内呈现一个 Login 组件。您将创建一个连接的容器。

第 1 步是创建一个简单的操作:

const LOGIN_ATTEMPT = 'auth/LOGIN_ATTEMPT';

export const login = name => ({
  type: LOGIN_ATTEMPT,
  payload: { name },
});

您现在将使用 react-redux 将此操作连接到您的“演示组件”。这将作为 prop 传递给组件。

import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';

import { login } from 'actions/auth';       // your action
import Login from 'components/auth/Login';  // your component to connect it to.

// state refers to the "current state" of your store.
const mapStateToProps = state => ({ currentUser: state.auth.user });

// dispatch refers to `store.dispatch`
const mapDispatchToProps = dispatch => {
  // calling this is like calling `store.dispatch(login(...params))`
  login: bindActionCreators(login, dispatch);
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

这个connect函数将把这两个函数作为参数。您现在可以导入此连接的容器并将其与作为属性“绑定(bind)”到它的函数一起使用。

下面的示例组件。

export default class Login extends Component {
  static propTypes = {
    // properties below come from connect function above.
    currentUser: PropTypes.shape({
      name: PropTypes.string.isRequired,
    }).isRequired,
    login: PropTypes.func.isRequired,
  };

  state = { name: "" };

  onChange = ({ target: { value: name } }) => this.setState({ name });

  onSubmit = e => {
    e.preventDefault();
    login(this.state.name);
  };

  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input
          placeholder="name"
          onChange={this.onChange}
          value={this.state.name}
        />
      </form>
    );
  }
}

注意，您不必引用商店。