Where should I keep data models in React and Redux? - reactjs

Question

In my app I have to make some order. Order has shape, about 20 properties, some of them are static, some are computed.
In my CartComponent.jsx i have method saveOrder which saves order for further use. It uses plain object as order model.
Now I can either confirm order or cancel it. After confirmation I dispatch authorizeOrder action to the store. Then user has to confirm order in some way (sms, token etc, whatever) and then order will be made. So flow is:
Save order -> Confirm order -> Authorize order (in other component) -> Send order (after authorization).
My question is: where should I keep shape of my order? It means - order model? Should it be created in authorizeOrder action? Or component is fine for that (sic!)? Or in orderModel.js which should expose order factory or order class?

Answer 1

Since you are using Redux, why not keep it there?
CreateOrder will then accept parameters for the object to be created and added to the store in turn.
The React component should dispatch to Redux which feeds back to React.
So for example (if I understand the question correctly):
MyReactComponent = React.createElement({
...
saveOrder: function(e) { //assuming it is a button
var myOrderObject = {
//properties...
}
this.props.createOrder(myOrderObject);
}
.....
});
var mapStateToProps = function (state) {
return {
orders: state.orders
};
}
var mapDispatchToProps = function (dispatch) {
return {
createOrder: function (properties) {
dispatch(myService.create(properties));
}
}
};
module.exports = ReactRedux.connect(mapStateToProps, mapDispatchToProps)(MyReactComponent );
Next in the store, you create the object on the dispatch function with the key that compares to what you sent in the service
//myService
var load = function (data) {
return function (dispatch, getState) {
dispatch({
type: "createOrderKey",
payload: data
});
};
};
in your reducer
function updateReducer(state, action) {
var newstate;
switch (action.type) {
case "createOrderKey:
//clone state to newState
//create and add the object
return newstate;
default:
return state;
}
};