2017-11-17 11 views
2

私はreact-reduxを初めて使用しています。この例ではgetVisiblieTodosという関数がmapStateToProps内で呼び出される例を見て驚きました。この関数は状態を変更するので減速機で呼び出される必要がありますか?簡潔さのためにコードが「良い形」に壊れていますか?これは一般的には大丈夫ですか?mapStateToPropsからの状態変更関数の呼び出し

私たちは店がアプリのために必要な最小限のデータを保持したいReduxのは、このlink

import { connect } from 'react-redux' 
import { toggleTodo } from '../actions' 
import TodoList from '../components/TodoList' 

const getVisibleTodos = (todos, filter) => { 
    switch (filter) { 
    case 'SHOW_ALL': 
     return todos 
    case 'SHOW_COMPLETED': 
     return todos.filter(t => t.completed) 
    case 'SHOW_ACTIVE': 
     return todos.filter(t => !t.completed) 
    } 
} 

const mapStateToProps = (state) => { 
    return { 
    todos: getVisibleTodos(state.todos, state.visibilityFilter) 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    onTodoClick: (id) => { 
     dispatch(toggleTodo(id)) 
    } 
    } 
} 

const VisibleTodoList = connect(
    mapStateToProps, 
    mapDispatchToProps 
)(TodoList) 

export default VisibleTodoList 

答えて

2

からコードを探しています。基本データから派生したものはすべて、その場で計算して、ストアの断片を複製しないようにし、ストアで何か変わったときにすべての派生データを再計算する必要があります。

可視のtodosリストはストアの一部ではなく、todosvisibilityFilterのリストを使用して計算されるため、getVisibleTodos()はストアの状態を変更しません。これらの2つのプロパティから導出された計算データを生成します。

ストアからデータを取得し、派生データを計算するために使用される関数は、selectorとして知られています。セレクタを使用すると、派生データはストアの一部ではなく、必要に応じて計算されます。さらに、メモオーバーされたセレクタを使用して、計算オーバーヘッドを節約することができます。

+1

通常の還元剤の使用とは対照的に、この方法でデータを計算することの利点は何ですか? – Andrew

+1

@Andrew - 複製されたデータを複数保存する必要がなくなるため、変更ごとに再計算する必要があります。 –

+1

これは良い答えです。そうですが、アプリに必要な最小限のデータを保持することは大丈夫です。また、私の答えは減速機の状態の複雑さのようないくつかの追加の事を言います。それについて私は正しいですか? –

1

todosは、減速材の状態に基づいて計算されたプロパティであり、状態を変更していません。

1つのコンポーネント(これはselectorsと呼ばれています)によってのみ使用されるリカーダーからプロパティを変換することは問題ありません。他のコンポーネントでtodosを使用したとしたら、フィルタリングや他のコンポーネントの変更など、あるコンポーネントで変更する必要はありません。これが当てはまる場合は、それを行うのは大丈夫です。

また、必要なデータのみを格納することはリデューサーの優れた特性です。より多くの状態は、アプリケーションの複雑さと、新しい状態を計算するためのオーバーヘッドです。

1

"switch .. case"ブロックまたは/および2つの引数があるため、getVisibleTodosがレデューサーとして表示されることがあります。しかし、それはルールではありません。

redux reducer(定義による)は、ディスパッチされたアクションに従ってストア状態を変更するため、2つの引数(ストア状態+ディスパッチされたアクション)をとり、変更なしでストアの新しい状態を返します。

getVisibleTodosここでは、文字列(フィルタ)に従って配列をフィルタリングするヘルパ関数です。

また、filterは還元作用ではなく、レンダリングする予定を決定する文字列です。

私はそれが奇妙なことに同意するかもしれません。アプリケーション全体(減速機、動作、...)を見ることができれば、ベストプラクティスかどうかを判断できます。

関連する問題