React Redux - 状態配列の子を更新する

Question

したがって、​​と呼ばれるReduxストアにオブジェクトがあります。これはgroupsという子配列を持ち、子配列はです。

function updateTask(task){ 
    http.post('xyz/updateTask', function(updatedTask){ 
     task = updatedTask; 
    }); 
} 

を...、それがうまく動作するだろう：

今、私は多かれ少なかれ行くことによって、実際の簡単角内の1つのタスクを更新することができます。

Reactでは、データをactionsに送信し、Axiosを使用してAPIに送信できますが、古いタスクをどのように見つけて更新するのですか？私ができる

：

• 、その後、再び全体​​オブジェクトを返すバックJSON文字列にそれを回すとするサーバーを取得し、
• （再レンダリングツリー全体にReduxのを強制的に）.. .ORそのIDによってタスクを見つけるにはforEach内のforEachを行う、（私はReduxのは、変化に拾うだろうかわからないが）、それを置き換える

しかし、これらの両方が完全に正気として私を打ちます。より簡単な方法があるのですか、それともReactの仕組みですか？

謝罪もしこれがばかげた質問であれば、私は本当にそれ以外の言葉を言いたいとは思いません。

Answer 1

httpコールから応答があったら、ストアを更新するアクションをディスパッチします。コンポーネントにディスパッチするためのアクセスが必要なので、機能を提供するにはmapDispatchToPropsを使用します。

作成者のReduxの初級チュートリアルはです。

このコード例は役に立ちます。

// 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); 

"UPDATE_TASK"アクションを処理するレデューサーが必要です。レデューサーはストアを更新し、コンポーネントが接続されていることを考慮して、更新されたストア値を持つ新しい小道具を受け取り、タスクがDOMで更新されます。

EDIT：レデューサーに対処するために、ここに追加の例があります。

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

他の誰かがこのことに固執すると、私はそれを分類したと思います。

私はちょうどこのような状態を設定するには「dotPoints」を使用し、その後、タスクの両親のすべてのインデックスに沿って渡す：

dotProp.set(state, `currentProject.groups.${action.groupIndex}.tasks.${action.taskIndex}`, action.task); 

は、これまでのところ、かなりきちんとした解決策のように思えます。