Reactコンポーネントからセレクター関数を呼び出す方法は？

Question

これは私がセレクタにしてデータを取得することができますが、私はコンポーネント

に

<button onClick={()=>props.getVisibleTodos(props.SHOW_ALL , props.experimentData.lights)}> SHOW_COMPLETED</button> 

を試してみました

import {todos} from '../reducers/todos'; 
import { createSelector } from 'reselect' 
var visibilityFilter='SHOW_ALL'; 

var getVisibilityFilter = (state) => visibilityFilter; 
var getTodos = (state) => todos; 

export const getVisibleTodos = createSelector(
    [ getVisibilityFilter, getTodos ], 
    (visibilityFilter, todos) => { 


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


    } 
) 

export default getVisibleTodos; 

、ビュー（コンポーネント）にこれをコールする方法がわからない、私のセレクタです

エラー

Uncaught Error: Actions must be plain objects. Use custom middleware for async actions. Blockquote

ヘルプ私を...

Answer 1

もしCがすべきこのようconnect機能上のすべてのセレクター：マッピング関数の内部

import { connect } from 'react-redux'; 
import getVisibleTodos from 'your/selector/file'; 

function YourComponent({ visibleTodos }) { 
    // You can access visibleTodos inside your component 
    // because now it's on the props 

    return (
    <div> 
     //... 
    </div> 
); 
} 

const mapping = (state, props) => ({ 
    visibleTodos: getVisibleTodos(state, props), 
}); 

connect(mapping)(YourComponent); 

は、あなたは現在のコンポーネントの状態や小道具へのアクセス権を持っています。すべてのセレクタは、データを照会するためにreduxストアを受け取る必要があることに注意してください。

幸運を祈る！それは、あなたがあなたのgetVisibilityFilterとgetTodosセレクタを書き換える必要があり、そうであれば

{ 
    todos: [ 
    { 
     id: 1, 
     text: 'Buy milk', 
     completed: false 
    }, 
    ... 
    ], 
    visibilityFilter: 'SHOW_ALL' 
} 

：

Answer 2

は、私はあなたのReduxのストアの状態は次のようになりますことを期待しています。

const getVisibilityFilter = (state) => state.visibilityFilter; 

const getTodos = (state) => state.todos; 

以前は、この編集された機能を使用して、状態から値にアクセスしていませんでした。私がどのようにJavaScriptオブジェクト以外の状態キーにアクセスするためにドット表記法を使用しているかを見てください。

セレクタを使用する場合は、コンテナコンポーネントで使用する必要があります。ここでは、mapStateToProps関数を使用してストアの状態にアクセスできます。

コンテナは、次のようなものになります：TodosListコンポーネントがドスを表示する独自のコンポーネントである

import React from 'react'; 
import { connect } from 'react-redux'; 
import { getVisibleTodos } from './selectors.js'; 
import TodosList from './TodosList.jsx'; 

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

const VisibleTodosList = connect(
    mapStateToProps 
)(TodosList); 

export default VisibleTodosList; 

を。それは小道具（this.props.todos）を使ってすべての目に見えるtodosを受け取るでしょう。

セレクタはビュー（プレゼンテーション）コンポーネントから呼び出されるのではなく、アプリケーションのデータにアクセスできるコンテナで使用されることを前提としています。

コンテナとプレゼンテーションコンポーネントの詳細については、articleをご覧ください。