How to create temporary states in ReactRedux?

Question

I have been using Redux for a month, and when the project becomes really large, it does not seem necessary to expose the entire application to all the values ​​of each Reducer. Is there a good way to create temporary states or create separate states for components?

I think this is all wrong or structured this way for some reason?

Answer 1

I assume the "values ​​of each reducer", you refer to the entire state of the application.

You can, of course, cut your state and expose only the necessary fragments to certain components. This is the connect method for react-redux . connect accepts a function (for example, mapStateToProps ), which, in turn, accepts all of your application state and provides only those parts that you designate as supports for the component that you "connect" to the abbreviation.

For example, suppose you have a simple React component, such as a username and address:

 var myComponent = React.createClass({ render: function() { return ( <div>{Name from redux state goes here}</div> <div>{Address from redux state goes here}</div> ); } }); 

Obviously, you do not need to send all your application state to this component, just the part with the username and address. So you use connect as follows:

 // the "state" param is your entire app state object. function mapStateToProps(state) { return { name: state.name, address: state.address } } var connectedComponent = connect(mapStateToProps)(myComponent); 

Now the wrapped myComponent looks like this:

 var myComponent = React.createClass({ propTypes: { name: React.PropTypes.string // injected by connect address: React.PropTypes.string // injected by connect }, render: function() { return ( <div>{this.props.name}</div> <div>{this.props.address}</div> ); } }); 

Answer 2

According to the Redux docs :

The state of your entire application is stored in the object tree inside one store.

One condition. One shop. It. You can create local states in your individual components that are informed about the larger state of the application, but at this point you simply copy parts of the larger state that already exist.

Keep in mind that in a complex application you cannot fully utilize all your smart components. Even if you have 100 reducer functions, when you connect the component to the repository , you can use mapStateToProps to select only the parts of the application the state you want and create the details for your component from them. Thus, you will never see all parts of the state that you are not using, even if you know that they exist.

This is a really great architectural example. In one state, you have the only source of truth . Because of this, it is impossible for any part of your application to have outdated data. Remember that you only determine your state structure when you initialize the state of your application, and not download all the data. Therefore, when starting, the initialization of the entire structure does not occur. And again, you will never load the entire state of your application into one component in any case (if this is not required), so your details will always be managed.