Store ui related properties outside of the component state - reactjs

Question

I've moved from using pure jsons in react to instances.
Meaning, I store instances inside the component state.
The problem is that the instances can't update their own properties because it means mutating the state so I need to clone the instance, update from outside of the instance, and then set state.
I wanted to store the instances on the component and store a dummy state property that once an instance property changes it updates the dummy state that will trigger a re-render.
Since the instances are related to the UI I know they should reside in the state.
I know it's not the best practice but I'm trying to figure out how bad is it.
For example:
class Team {
constructor(data) {
this._teamMates = null;
this.id = data.id;
}
get teamMates() {
if (!this._teamMates) {
this.fetchTeamMates();
return null;
}
else
return this._teamMates;
}
fetchTeamMates() {
fetch('/teamMates/' + this.id).then(teamMates => this._teamMates = teamMates);
}
}
When we first try to get teamMated they are not valid so we fetch them and on the next state change I want them to be valid as teamMates.
I can return a promise instead of null, it is possible but I want to handle it this way because I want to have conditional rendering if we have the teamMates.
I know there are multiple ways to solve this thing but I rather try to find a way to make it work without returning a promise.

Answer 1

I'm not exactly sure what you mean by:
"The problem is that the instances can't update their own properties because it means mutating the state so I need to clone the instance, update from outside of the instance, and then set state."
It sounds like the simplest thing to do is create the state and method in a parent HOC, pass them to a child component and fire the action in an event handler, it should then update the parents state and cause the normal render in the child. Ideally your child would be a "dumb component", literally just passing the values and actions and rendering.

Answer 2

I think you are looking for some state manager, like redux for example (you didn't exclude it from your question)
If you really want to keep your own instances (what I don't see as a necessity, as it is in no way necessary, you are handling with state), then you should create an immutable version of your classes, meaning, if you update a player inside your team, you should return a new version of your team instance, with the changed player data.
The below example doesn't use an instance, but it moves the team mates to a store, and lets redux manage the state (so it removes it from component state).
Main key points to focus on would be:
The connect statement, connecting a component with a (part of) state injected in its props, and adding a dispatcher that handles the actions you dispatch to it, looking like this:
const ConnectedTeamEditor = connect( teamStateToProps, playerDispatcher )( TeamEditor );
This requires then ofcourse a state mapper and the dispatcher, which looks pretty much like this:
// dispatcher for the actions
const playerDispatcher = dispatch => ({
fetch() {
return getTeamMates().then( response => dispatch( { type: 'loaded', payload: response } ) );
},
update( player ) {
dispatch( { type: 'update', payload: player } );
}
});
// state mapper, sharing teamMates state over the connected components props
const teamStateToProps = state => ({ teamMates: state.teamMates });
To handle the dispatch calls, we would need a reducer that is then also registered into a store, and we use the createStore method provided by react-redux. The reducer can have a default state
// reducer for player actions
const playerReducer = ( state = { teamMates: null }, action ) => {
switch ( action.type ) {
case 'loaded':
return { teamMates: action.payload };
case 'update':
return { teamMates: state.teamMates.map( player => player.id === action.payload.id ? action.payload : player ) };
default:
return state;
}
};
// and registration to store
const appStore = createStore( playerReducer );
React-redux will automatically update the affected components, once their state gets updated. Important to note is that state shouldn't be mutated, it should be replaced when required. It is also important that the state is returned when no matching action.type was found.
Finally, the application should be wrapped with a Provider that receives the store through its props, and that would then look like that.
ReactDOM.render( <Provider store={appStore}><ConnectedTeamEditor /></Provider>, target );
I do keep a component state, but only for updating the selected player at the time.
As most of us are in WK mood, I kinda went freestyle on the design, just run the code to see what I mean ^_^
const { createStore } = Redux;
const { Provider, connect } = ReactRedux;
// data provider
function getTeamMates() {
return Promise.resolve([
{ id: 1, firstName: 'Romelu', lastName: 'Lukaku', position: 'forward' },
{ id: 2, firstName: 'Dries', lastName: 'Mertens', position: 'forward' },
{ id: 3, firstName: 'Eden', lastName: 'Hazard', position: 'forward' },
{ id: 4, firstName: 'Radja', lastName: 'Naingolan', position: 'midfield' },
{ id: 5, firstName: 'Kevin', lastName: 'De Bruyne', position: 'midfield' },
{ id: 6, firstName: 'Jordan', lastName: 'Lukaku', position: 'defender' },
{ id: 7, firstName: 'Axel', lastName: 'Witsel', position: 'midfield' },
{ id: 8, firstName: 'Vincent', lastName: 'Kompany', position: 'defender' },
{ id: 9, firstName: 'Thomas', lastName: 'Meunier', position: 'defender' },
{ id: 10, firstName: 'Marouane', lastName: 'Fellaini', position: 'midfield' },
{ id: 11, firstName: 'Thibaut', lastName: 'Courtois', position: 'Goalie' }
]);
}
// some container to translate the properties to readable names
const labels = {
'id': '#',
'firstName': 'First Name',
'lastName': 'Last Name',
'position': 'Position'
};
// small function to return the correct translation or default value
const translateProperty = ( property ) => labels[property] || property;
// a field that is either editable or just shows a span with a value
const Field = ({ isEditable, value, onChange }) => {
if ( isEditable ) {
return <span className="value">
<input type="text" value={ value } onChange={ e => onChange( e.target.value ) } />
</span>;
}
return <span className="value">{ value }</span>;
};
// a single player, delegating changes to its data and selection style
const Player = ({ player, isSelected, onChange, onSelect }) => {
return (
<div className={classNames('row', { isSelected })} onClick={ () => !isSelected && onSelect && onSelect( player ) }>
{ Object.keys( player ).map( property => (
<div className="cell" key={property}>
<span className="label">{ translateProperty( property ) }</span>
<Field
isEditable={isSelected && property !== 'id' }
value={ player[property] }
onChange={ newValue => onChange( {...player, [property]: newValue } ) }
/>
</div>
) ) }
</div>
);
};
// reducer for player actions
const playerReducer = ( state = { teamMates: null }, action ) => {
switch ( action.type ) {
case 'loaded':
return { teamMates: action.payload };
case 'update':
return { teamMates: state.teamMates.map( player => player.id === action.payload.id ? action.payload : player ) };
case 'add':
return { teamMates: state.teamMates.concat( [ {
id: state.teamMates.reduce( (c, i) => c > i.id ? c : i.id, 0 ) + 1,
...action.payload } ] ) };
default:
return state;
}
};
// dispatcher for the actions
const playerDispatcher = dispatch => ({
fetch() {
return getTeamMates().then( response => dispatch( { type: 'loaded', payload: response } ) );
},
update( player ) {
dispatch( { type: 'update', payload: player } );
},
add( player ) {
dispatch( { type: 'add', payload: player } );
}
});
const teamStateToProps = state => ({ teamMates: state.teamMates });
// the team editor that works with props
class TeamEditor extends React.Component {
constructor() {
super();
this.state = {
selectedPlayer: null,
newPlayer: null
};
}
componentWillMount() {
// load when mounting
this.props.fetch();
}
selectPlayer( player ) {
// component state keeps the selected player
this.setState( { selectedPlayer: player } );
}
updatePlayer( player ) {
// update player through dispatcher
this.props.update( player );
}
onAddClicked() {
this.setState( {
isAdding: true,
newPlayer: {
firstName: '',
lastName: '',
position: ''
}
} );
}
updateNewPlayer( player ) {
this.setState( { newPlayer: player } );
}
savePlayer() {
this.setState( { isAdding: false } , () => this.props.add( this.state.newPlayer ) );
}
cancelChanges() {
this.setState( { isAdding: false } );
}
render() {
const { teamMates} = this.props;
const { selectedPlayer, isAdding, newPlayer } = this.state;
return (
<div className="team">
<div className="row">
{ !isAdding && <button
type="button"
onClick={ () => this.onAddClicked() }>Add team member</button>
}
{ isAdding && <span>
<button
type="button"
onClick={ () => this.savePlayer() }>Save</button>
<button
type="button"
onClick={ () => this.cancelChanges() }>Cancel</button>
</span> }
</div>
{ isAdding && <div className="row">
<Player
isSelected
player={newPlayer}
onChange={ (...args) => this.updateNewPlayer( ...args ) } />
</div> }
{ teamMates && teamMates.map( player => (
<Player
key={player.id}
isSelected={ !isAdding && selectedPlayer && selectedPlayer.id === player.id }
player={player}
onChange={ (...args) => this.updatePlayer( ...args ) }
onSelect={ (...args) => this.selectPlayer( ...args ) }
/> ) ) }
</div>
);
}
}
// connect the teameditor with state and dispatcher
const ConnectedTeamEditor = connect( teamStateToProps, playerDispatcher )( TeamEditor );
// create a simple store, no middleware
const appStore = createStore( playerReducer );
const target = document.querySelector('#container');
ReactDOM.render( <Provider store={appStore}><ConnectedTeamEditor /></Provider>, target );
* { box-sizing: border-box; }
body { margin: 0; padding: 0; }
.row {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-evenly;
align-content: center;
}
.row:hover {
cursor: pointer;
}
.row.isSelected > .cell > * {
background-image: linear-gradient( rgba( 225, 225, 225, 0.7 ), rgba( 255, 255, 255, 0.9 ) );
}
.cell {
display: flex;
flex-direction: column;
flex-basis: 25%;
flex-grow: 0;
flex-shrink: 0;
align-self: flex-start;
background-color: yellow;
}
.cell:first-child {
background-color: red;
}
.cell:last-child {
background-color: black;
color: #fff;
}
.cell > span {
padding: 5px;
}
.cell > span > input {
width: 100%;
}
.label {
text-transform: capitalize;
}
<script id="react" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.js"></script>
<script id="react-dom" src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.js"></script>
<script id="classnames" src="https://cdnjs.cloudflare.com/ajax/libs/classnames/2.2.5/index.js"></script>
<script id="redux" src="https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.js"></script>
<script id="react-redux" src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/5.0.6/react-redux.js"></script>
<div id="container"></div>