react-redux搜索过滤器的麻烦

发布时间:2020-07-07 17:56

这是我的第一个react-redux项目(课程列表),我对redux有一些麻烦。我需要按课程名称进行搜索,我的代码基于此answer,我可以在redux-devtool中看到操作,但不能在ui上看到。请帮助我了解我在做什么错

    //action    
    export function search (value) {
        return {type: SEARCH, value};
    }

    //reducer
    import { COURSES } from '../../constants';
    const initialState = COURSES;    
    export default function reducer(state = initialState, action) {
        switch(action.type) {
            case SEARCH: {
                const {value} = action;
                const course = state.filter((val) => val.includes(value));
                return {...state, value, course};
            }
            default:
                return state;
        }
    }

//search component

    import React, {Component} from 'react';
    import {connect} from 'react-redux';
    import {deleteCourse, search} from '../../redux/actions';

    class SearchInput extends Component {
        render() {
            const {search, value} = this.props;
            return (
                <div className={classes.SearchInput}>
                    <input
                        placeholder='Search'
                        onChange={(e) => search(e.target.value)}
                        value={value}
                    />
                </div>
            )
        }
    }

    export default connect (state => ({
        courses: state.courses,
    }), {search})(SearchInput);


//Courses Component
import Form from '../Form/Form';
    import { deleteCourse, search } from '../../redux/actions';

    const Courses = ({ courses, deleteCourse }) => {
        console.log(courses)
        return (
            <div className={classes.Courses}>
                <SearchInput />
                <Button title='Add course' />
                <CourseList
                    courses={courses}
                    deleteCourse={deleteCourse}
                    search={search}
                />
                <Form />
            </div>
        )
    }

    export default connect (state => ({
        courses: state.courses,
    }), {deleteCourse})(Courses);

image-from-redux-devtool

回答1

可能是由某些原因引起的

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

除非您没有在上面添加整个操作代码(可能是根据开发工具的照片判断),否则您将传递一个未定义的变量作为类型

 import { COURSES } from '../../constants';
    const initialState = COURSES;    
    export default function reducer(state = initialState, action) {
        switch(action.type) {
            case SEARCH: {
                const {value} = action;
                const course = state.filter((val) => val.includes(value));
                return {...state, value, course};
            }
            default:
                return state;
        }
    }

在化简器中,它的初始状态看起来像是一个数组(因为您可以直接对其进行过滤),但是随后您将该数组迭代为返回对象的属性。

const initialState = {courses: [], value: '', matches: []}

const matches = state.courses.filter((val) => val.includes(value));

return {...state, matches: matches};

您的初始状态结构不应在返回时进行重组;相反,它应该看起来像上面的样子,并且匹配项是从state.courses中过滤出来的。在状态中存储搜索值似乎也没有任何用处,因此可以将其删除。

总体而言,由于父组件可以管理自己的呈现,因此我认为不必通过redux进行搜索。您只需要创建一个state属性来过滤由redux connect传入的课程。

请参见工作示例:

https://codesandbox.io/s/zen-boyd-9cgfo?file=/src/App.js