React Redux - update child in state array - reactjs

Question

So I have an object in Redux store called currentAccount. It has a child array called groups, which has a child array called tasks.
Now, I could update one task real easily in Angular by more-or-less going:
function updateTask(task){
http.post('xyz/updateTask', function(updatedTask){
task = updatedTask;
});
}
...and that'd work just fine.
In React, I can dispatch the data to actions, post it to the API with Axios, but then... how do I find and update the old task?
I could:
Get the server to return the entire currentAccount object again, then turn it into a JSON string and back (forcing Redux to re-render the whole tree),
...or do a forEach within a forEach to find the task by its ID, then replace it (although I'm not sure Redux would pick up on the change)
But both of these strike me as totally insane. Is there a simpler way, or is that just sort of how React works?
Apologies if this is a dumb question, I'm not really sure how else to word it, haha.

Answer 1

Once you have your response from your http call, dispatch an action that updates the store. You would need access to dispatch in your component, so you would use mapDispatchToProps to provide the functionality.
Here is a great starter tutorial for Redux by the creator, Dan Abramov.
This code example should help you.
// I'm using this stateless functional component to
// render the presentational view
const Task = ({ label, info }) => (
<div className="task">
<h3{ label }</h3>
<p{ info }</p>
</div>
);
// this is the class that receives props from connect
// and where we render our tasks from
class Tasks extends PureComponent {
// once your component is mounted, get your
// http data and then disptach update action
componentDidMount() {
// using axios here but you can use any http library
axios.post( "/some_url", task )
.then( ( response ) => {
// get update provided by mapDispatchToProps
// and use it to update tasks with response.data
const { update } = this.props;
update( response.data );
})
.catch( ( error ) ) => {
// handle errors
}
}
render() {
// destructure tasks from props
const { tasks } = this.props;
// render tasks from tasks and pass along props
// if there are no tasks in the store, return a loading indicator
return (
<div className="tasks">
{
tasks ? tasks.map(( task ) => {
return <Task
label={ task.label }
info={ task.info }
/>
}) :
<div className="loading">Loading...</div>
}
</div>
);
}
}
// this will provide the Tasks component with props.task
const mapStateToProps = ( state ) => {
return {
tasks: state.tasks
}
}
// this will provide the Tasks component with props.update
const mapDispatchToProps = ( dispatch ) => {
return {
update: ( tasks ) => {
dispatch({
type: "UPDATE_TASKS",
tasks
});
}
}
}
// this connects Task to the store giving it props according to your
// mapStateToProps and mapDispatchToProps functions
export default Task = connect( mapStateToProps, mapDispatchToProps )( Task );
You will need a reducer that handles the "UPDATE_TASK" action. The reducer updates the store, and considering the component is connected, it will receive new props with the updated store value and the tasks will updated in the DOM.
EDIT: To address the reducers, here is an additional example.
import { combineReducers } from "redux";
const tasks = ( state = [], action ) => {
switch( action.type ) {
case "UPDATE_TASKS":
// this will make state.tasks = action.tasks which
// you dispatched from your .then method of the http call
return action.tasks;
default:
return state;
}
};
const other = ( state = {}, action ) => {
...
}
const combinedReducers = combineReducers({
tasks,
other
});
const store = createStore(
combinedReducers/*,
persisted state,
enhancers*/
);
/*
The above setup will produce an initial state tree as follows:
{
tasks: [ ],
other: { }
}
After your http call, when you dispatch the action with the tasks in
the response, your state would look like
{
tasks: [ ...tasks you updated ],
other: { }
}
*/

Answer 2

If anyone else gets stuck on this I think I've sorted it out.
I just pass along all the indexes of the task's parents, then use 'dotPoints' to set the state like this:
dotProp.set(state, `currentProject.groups.${action.groupIndex}.tasks.${action.taskIndex}`, action.task);
Seems like a fairly neat solution so far.