这是我的第一个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);
可能是由某些原因引起的
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传入的课程。
请参见工作示例: