React-redux: how do you access storage from anywhere without importing it?

Question

The reaction-reduction documentation states that when using React-redux and connect() importing a store is not recommended. This is an anti-pattern.

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

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

With React Redux, the wrapper classes generated by the connect () connection function really look for props.store if it exists, but it is better if you close your root component and React Redux is worried about skipping the store. Thus, the components do not need to worry about importing the storage module and isolating the Redux application or server resolution is much easier to do later.

How can I access the store from any component I have selected (even in the back of the application), as soon as I correctly connected to the store in my application? My code connects the App correctly, but I cannot access the repository from any child components at all. store.dispatch() is null, store.getState() is null, etc. I believe that there is no documentation in this regard. He said it was magic, but I would like to know how to use magic. Does mapDispatchToProps() need to be written over and over for each individual container component? A use case will be support for currentUser , which will be available for each child component of the application. I would like to pass this on with the App every child.

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

Inside the App I have a Login component and I would like to dispatch a action inside it. But I need a link to the store , but apparently I should not import it.

Answer 1

It uses the concept of containers .

Suppose you want to display the Login component inside your App . You will create a connected container.

Step 1 is to create a simple action:

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

You are now using react-redux to associate this action with your presentation component. This will be passed to the component as 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); 

This connect function will take these two functions as parameters. Now you can import this connected container and use it with functions that are “bound” to it as properties.

An example is below.

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

Please note: you never had to refer to the store.