Панель поиска React / Redux не работает - PullRequest
Новая
       18

Панель поиска React / Redux не работает

0 голосов
/ 03 мая 2018

У меня есть строка поиска в моем списке TODO: 

import React, { Component } from 'react';
import { FilterTasks } from '../../redux/actions/searchbar';
import reducers from '../../redux/reducers';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';

class SearchBar extends Component {
    render() {
      const {search, value} = this.props;

      return (
          <input
            className="form-control"
            placeholder = "Filter Tasks"
            onChange={(e) => FilterTasks(e.target.value)}
            value={value} />
      );
    }
  } 

  function mapStateToProps({tasks}) {
    return {value: tasks.value};
  }

  function mapDispatchToProps(dispatch) {
    return bindActionCreators({FilterTasks}, dispatch);
  }

  export default connect(mapStateToProps, mapDispatchToProps)(SearchBar);

Вот мое действие для фильтрации: 

export const SEARCH = 'SEARCH';

export function FilterTasks(value) {
  return {type: SEARCH, value};
}

Мой редуктор панели поиска: 

import {SEARCH} from '../actions/searchbar';

const initialState = {}

export default function SEARCHREDUCER(state = initialState, action) {
  switch(action.type) {
    case SEARCH: {
      const {value} = action;
      const tasks = state.contents.filter((val) => val.includes(value));
      return {...state, value, tasks};
    }
    default:
      return state;
  }
}

Мой индекс редуктор: 

import { combineReducers } from 'redux';
import SEARCHREDUCER from '../reducers/searchbar';

const TaskReducer = (state = [] ,action) => {
    switch (action.type){
    case 'ADD_TASK':
    state = state.concat(action.payload);
    break;
    case 'DELETE_TASK':
  state = state.tasks.filter(task => task !== action.payload)
    break;
    }
    return state;
},

reducers = combineReducers({
    tasks : TaskReducer,
    SEARCHREDUCER 
});

export default reducers;

И мой класс TasksList, где должен отображаться отфильтрованный список: 

import React, { Component } from 'react';
import {connect} from 'react-redux';
import Task from '../task'

class TaskList extends Component {
    render(){
        return(
            <table>
                <thead>
                    <tr>
                        <th>Tasks</th>
                        <th>Actions</th>
                    </tr>
                </thead>
                <tbody>
                    {this.props.tasks.map((task,index) => <Task key={index} task={task} />)}
                </tbody>
            </table>
        );
    }
}

function MapStateToProps(state){
    return{
        tasks:state.tasks,
    }
}

export default connect (MapStateToProps)(TaskList);

Моя проблема здесь в том, что когда я набираю запись в строке поиска, список задач вообще не меняется, он не отображает никаких ошибок. Что мне здесь не хватает?

1 Ответ

0 голосов
/ 03 мая 2018

FilterTasks(e.target.value) вместо этого должно быть this.props.FilterTasks(e.target.value), в противном случае он вызовет импортированную функцию из действий, которые не связаны с Redux вашим mapDispatchToProps.

Кроме того, ваши TaskReducer и SEARCHREDUCER неверны. Переменная reducer - это переменная с комбинированным состоянием, а не TaskReducer или SEARCHREDUCER.

Вы должны просто сохранить строку поиска в состоянии и выполнить фильтрацию в пределах TaskList с помощью this.props.tasks.filter(<insert filter function>).map(<insert map function>).

...