I started learning reaction-redux-immutable a couple of days ago, and I'm still pretty confused about structuring my application. I have php (symfony / laravel MVC background), so it is not easy to understand my javascript concept.
1) I have a WrapperComponent line:
export default function (props) { const style = {position: "relative"}; const lines = props.lines; return ( <div className='wrapper' style={style}> {lines.map(line => ( <Line key={line.get("id")} {...line.toObject()} /> ))} <Board /> </div> ); }
2) This is due to the WrapperContainer
import Wrapper from '../components/WrapperComponent'; export default connect( function mapStateToProps(state) { return { lines: state.lines.map(line => { return line.set("board", { width: state.board.get("width"), height: state.board.get("height") }); }) }; }, function mapDispatchToProps(dispatch) { return {}; } )(Wrapper);
3) Then the addLine action is executed
export function addLine(type) { return { type: types.ADD_LINE, payload: { id: 3, top: 0, left: 0, diffX: 0, diffY: 0, type: type, board: { width: 0, height: 0 }, active: false } }; }
4) It talks about LinesReducer
export default function LinesReducer(state = initialState, action) { switch (action.type) { case types.ADD_LINE: return state.push( Map(action.payload) ); default: return state; } }
5) So that the WrapperContainer can listen to state changes and re-display the lines
export default connect( function mapStateToProps(state) { return { lines: state.lines.map(line => { return line.set("board", { width: state.board.get("width"), height: state.board.get("height") }); }) }; }, function mapDispatchToProps(dispatch) { return {}; } )(Wrapper);
Now my question is:
Where can I put the logic regarding the addLine action?
When I create a row, I want to set its identifier And I want to set its width in the same way as the width / height of another component.
I assume that actions should only transfer information from one place to another.
Then I think ... maybe the logic should live in LinesReducer. But the Lines reducer does not have access to the global state of the application, so I do not know what width / height a new line should have.
Then there is the WrapperContainer. The container has information about the state of the entire application, so it seems advisable to scroll through each line and set the identifiers, if not installed, and update their width / height and other information.
But that doesn't seem right to me. I was thinking of one place that collected information about the global state of the application, then it would add a new line based on this information, and nothing else will touch this line again. Except for another action.
Is this the right approach? I really want to change the line width / height when another component height / width changes, so the container makes the most sense to me.
EDIT:
May be:
1) set the ID in action when the line is actually created (I just don’t know how many lines are already there, so I really don’t know which ID I should set)
2) set the width / height in the container when it passes the lines to the details (but if I eventually want to display the lines in another container, I will have to duplicate the code there if I do not create any "global" function that handles the transfer lines to components in containers)