モデルでReduxを使用

Question

私はReuxでReduxを使い始めました。私は本当にそれを愛しています。しかし、現在私が問題になっているのは、州のほかに、私がアプリケーション全体に保存/使用する必要がある情報がたくさんあるということです。

この特定のケースでは、私はAPIからフェッチされた状態のモデルを持っています。このモデルには、自分自身に関する情報もいくつかあります。どのように画面上のプロパティを表示する "名前" => "blablaの名前"。私はReduxを使用して状態を処理する方法を理解していますが、私はアプリケーション全体に伝播する必要があるが、実際には状態ではないこの他の情報とは何かを見て困っています。

Answer 1

Reduxによると、州だけが「真実の源」です。また、重複があってはなりません（矛盾が生じる）。

したがって、状態にはnameを保存する必要がありますが、にはラベルプロパティを保存しないでください。

実際には、名前の値の関数（数学的な意味での）であり、もしそれらが異なる場合（例えば、ある点で名前=== 'foo' 「名前のfoo」の代わりに「バーの名前」）、問題があります。

私は何をしますか？あなたの状態（その場合は名前）に最小値を保存し、あなたが必要とするComponentに直接ラベルを貼り付けます。

再使用する必要がある場合は、名前を小道具として使用するコンポーネントを作成し、「blablabaの名前」（名前= blablaの場合）という文字列をレンダリングします。

さらに複雑な計算が必要な場合（複数のラベルや日付計算などがある場合）、Stateを入力にして、計算されたすべての出力で "Model"を吐き出す関数をいつでも作成できます。

Reduxのは自然の中で非常に機能的であるので、あなたにもそれを受け入れるかもしれません:)

Answer 2

を私は一種の後期パーティーによ知っているが、私は誰かが答えを使うかもしれないと思いました。今のところReactを使って数年前に働いていたのは、次のような構造を持つことです：

• 状態：自分のデータの構造（または「スキーマ」）を設定します。
• アクション：この状態を変更します。これらのアクションは、同期操作または非同期操作を処理できます。
• Sagas：非同期アクションを処理します。
• セレクタ：ビュー/ APIに必要なデータの構造を処理します。
• 定数：時間の経過とともに変化しないで、自分の状態に追加する意味がないその他のデータ。

だから私のアプリケーションの流れはこのようなものであることを言った： ACTIONは、そのアクションがSAGAが待機しているされて非同期コールおよびそれがフェッチ操作を実行した場合=>このサガはへの更新を節約=>ディスパッチされますSTATE => [今後コンポーネント層に反応する] =>何らかの理由で自分の状態から別のフォーマットのデータが必要な場合は、SELECTORを送信します。このフォーマットは変更されます。>次に、この新しい解析データを私のコンテナコンポーネント。

他のフローには、stateにない静的データが必要なものがあります。私はそれを別のファイルのオブジェクトに保存し、それを直接コンテナコンポーネントにインポートします（子供/プレゼンテーションコンポーネントでは何も直接インポートしません）。他のコンポーネントのみ。コンポーネント）。

私が考えることのできる第3の種類の流れは、あなたのAPIへのPOSTを行う必要があるときです。何らかの理由で、あなたの状態のデータが何らかの解析を必要とするときです。その場合は、最初の例でも同じことを行いますが、逆の場合はACTION =>これを処理する前にSAGA =>を処理します。私のデータはPOST用に既に構造化されています。メソッドはselectと呼ばれ、ここでセレクタを使用するのに役立ちます）=>非同期操作を実行すると、それに応じて状態を更新します。

はちょうどあなたが、私はここにいくつかのリンクのセレクタやサガによって何を意味するのか分からない場合には：

• サガ：https://github.com/yelouafi/redux-saga
• セレクタ：https://github.com/reactjs/reselect

Answer 3

を私はモデルが必要に応じていると思います他のシステムと同じように、Reduxベースのアプリケーション用です。

モデルはシステムのボキャブラリです。モデルはコードベースに健全性をもたらします。それらがなければ、コードベースはひどく歪んだ思考のように見えます。

状態関数を使用して、ReactJS + Reduxアプリケーションでモデルの必要性を満たすことができます。 データとメソッドを保持するモデルと同じように、これらのオブジェクトは、状態に適用できる関数のみを保持します。

ここではhttps://medium.com/@nshnt/state-functions-for-modeling-with-redux-a9b9d452a631をお読みください。ここで

は状態関数で有名なReduxのTODOアプリの例です：

todo_reducer.js：

import TODO from './todo_state'; 

const todoListReducer = (state=TODO.initialState(), action)=>{ 
    switch(action.type){ 

    case 'ADD_TODO' : 
     return TODO.addTask(state, action.taskName); 

    case 'FINISHED_TODO': 
     return TODO.setFinished(state, action.taskID); 

    case 'PENDING_TODO': 
     return TODO.setPending(state, action.taskID); 

    default : 
     return state; 
    } 
}; 

export default todoListReducer; 

TODO-state.js：

export default { 
    initialState:() => [], 

    addTask: (todoList, name)=> todoList.concat({id: todoList.length, name: name}), 

    setFinished: (todoList, taskId) => (
     todoList.map(task=> task.id === taskId ? {...task, complete: true} : task) 
), 

    setPending: (todoList, taskId) => (
     todoList.map(task=> task.id === taskId ? {...task, complete: false} : task) 
), 

    pending: todoList=> todoList.filter(task=> !task.complete) 

}; 

私もコンポーネントが状態の何らかの操作を必要とする場合、これらの状態関数をコンポーネントで使用します。

todo_list.js：一見

import React from 'react'; 
import {connect} from 'react-redux'; 
import TODO from './todo_state'; 

const TodoList = ({tasks, showCompletedTasks, toggleTodo})=> { 
    const toListElement = (task) => (
     <li key={task.id}> 
     <input type="checkbox" checked={task.complete} onChange={(e)=> toggleTodo(task)}/> 
     <label>{task.name} {task.complete ? "Complete" : "Pending"}</label> 
     </li> 
); 
    const visibleTaskList = 
     (showCompletedTasks ? tasks 
     : TODO.pending(tasks)).map(toListElement); 

    return (
     <ul className="todo-list"> 
     {visibleTaskList} 
     </ul> 
); 
} 
..... 
export default connect(mapStateToProps, mapDispatchToProps)(TodoList);