React Reduxの責任

Question

私は数日前にreact-redux-immutableのカップルを学び始めました。私はまだ自分のアプリケーションを構造化することについてかなり混乱しています。私はphp（symfony/laravel MVCバックグラウンド）を持っているので、いくつかのjavascriptのコンセプトを頭に浮かべるのは簡単ではありません。

1）Iは、ラインWrapperComponentを有する：

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）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に接続されている）、そしてaddLine作用

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がある）協議すなわちラインリデューサーへ

export default function LinesReducer(state = initialState, action) { 
    switch (action.type) { 
     case types.ADD_LINE: 
      return state.push(
       Map(action.payload) 
      ); 
     default: 
      return state; 
    } 
} 

5）WrapperContainerは、状態の変化と再描画ライン

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

を聞くことができるようにするためには、今、私の質問は：私はaddLineアクションに関するロジックを入れてください

？

私は行を作成するときにそのIDを設定したいと思って、別のコンポーネントの幅/高さと同じ幅に設定したいと思います。

私は、アクションはある場所から別の場所に情報を転送する必要があると思います。

私は考えています...おそらく論理はLinesReducerで生きるべきです。しかし、ライン減速機はアプリケーションのグローバルな状態にアクセスすることができないので、新しい行にどの幅/高さがあるべきか分かりません。

WrapperContainerがあります。コンテナにはすべてのアプリケーションの状態に関する情報があるので、各行をループし、設定されていなければIDを設定し、幅/高さなどの情報を更新するのが合理的です。

しかし、それは私にとって正しいとは思われません。アプリケーションのグローバルな状態に関する情報を収集する場所を1つ考えたところ、その情報に基づいて新しい行が追加され、その行に再び触れることはありませんでした。別のアクションを除いて。

これは正しいアプローチですか？他のコンポーネントの高さ/幅が変更されたときに、コンテナが私にとって最も理にかなっているときに、実際に線幅/高さを変更したいと思っています。

EDIT：多分

：

1）ラインが実際に作成されたときに（私はちょうどので、私は本当に知らない既に存在しているどのように多くの行を知らないアクションでIDを設定しますどのIDを設定する必要がありますか）

2）小道に行を渡すときにコンテナの幅と高さを設定します（ただし、最終的に別のコンテナに行を描画したい場合は、作成しない限りコードを複製する必要がありますコンテナ内のコンポーネントの小道に渡す行を処理する「グローバル」関数）

Answer 1

あなたのレデューサーは純粋な機能であるべきです。つまり、同じ引数で複数回呼び出すと、引数に応じて同じ結果が得られます。

つまり、そのタイプのロジックを置く必要がある場所は、addLineという機能を持つアクションクリエーターと呼ばれています。

アクション作成者は、アクションを作成する機能とまったく同じです。 「アクション」と「アクションクリエイター」の用語を簡単に組み合わせることができます。したがって、適切な用語を使用するために最善を尽くしてください。

アクションクリエイターは非同期で、副作用を持つこともできます。

はredux-thunkのようないくつかのミドルウェアを追加することによって、あなたの現在の状態を知ることができるdocs

アクションの作成者では、こちらをご覧ください：

Reduxのサンクミドルウェアは、関数を返すアクションクリエイターを書くことができます行動の代わりにサンクは、アクションのディスパッチを遅らせるために、または特定の条件が満たされた場合にのみディスパッチするために使用できます。内部関数は、ストア・メソッドdispatchおよびgetStateをパラメータとして受け取ります。