如何從React Component調用選擇器函數？

這是我的選擇，我可以能夠與在選擇獲取數據，但不知道如何將這種調用到視圖（組件），如何從React Component調用選擇器函數？

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;

我已經在組件

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

嘗試

錯誤

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

幫我...

來源

2017-03-21 Gopinath

你應該ç所有在這樣的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存儲以查詢數據。

祝你好運！

來源

2017-03-21 16:15:20 Crysfel

好吧，謝謝你的回覆，讓我試試看...如果沒關係 – Gopinath

我期待你的終極版商店狀態看起來是這樣的：

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

如果是這樣，那麼你必須重寫getVisibilityFilter和getTodos選擇。

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

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

此前，您並未使用您編輯的函數訪問您的狀態值。看看我是如何使用點符號來訪問狀態鍵的，這只不過是一個JavaScript對象。

另外，當你想使用選擇器時，你應該在一個容器組件中使用它，你可以使用mapStateToProps函數訪問商店的狀態。

，容器可能是這個樣子：

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;

凡TodosList組件是您自己的組件，顯示待辦事項。它將使用道具收到所有可見的待辦事項（this.props.todos）。

在我看來，選擇器不會從您的視圖（表示性）組件中調用，它們是用於容器中的，您可以在其中訪問應用程序的數據。

如果您想了解更多有關集裝箱和展示部件的信息，請看這article，值得一讀。

來源

2017-03-21 16:31:12 vasekhlav

如何從React Component調用選擇器函數？

回答

相關問題