Реагировать на фильтр поиска редукса, не отображая отфильтрованный контент

Question

Я создал поисковый фильтр, используя реагировать на редукцию, но когда я набираю текст в поле поиска, список проектов не изменяется в зависимости от того, какое значение я ввожу в поисковой строке.Почему так ?Проекты должны быть отфильтрованы на основе результатов поиска, но это не работает, почему так?

Код:

home.js:

 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { searchTermChanged } from '../../store/actions/searchAction';
 import projects from '../../data/projects';

 class Home extends Component {
      render() {
          const { searchTermChanged } = this.props;
          return (
              <div>
                  <Navbar/>
                  <div className="header">
                  <div className="md-form mt-0 customsearch">
                      <input className="form-control" type="text" placeholder="Search projects" aria-label="Search" 
                        value={this.props.searchTerm}
                        onChange={e => searchTermChanged(e.target.value)}
                      />
                  </div>

                  <div class="container-fluid">
                      <div class="row">
                          {projects.map( (val,index) => (
                              <div class="col-3" key={index}>
                                   <Card title={val.title} by={val.by} blurb={val.blurb} url={val.url} funded={val.funded} backers={val.backers} imgurl={index}/>
                              </div>
                          ))}
                      </div>
                  </div>
             </div>
          )
       }
    }

    const mapStateToProps = state => ({
        search: state.search.searchTerm
    })

    export default connect (mapStateToProps, { searchTermChanged })(Home);

searchReducer.js:

   import { SEARCH_INPUT_CHANGED } from '../actions/types';
    import Projects from '../../data/projects';

    const initialState = {
        searchTerm: '',
        projects: Projects
    }

    export default function (state = initialState, action) {
        switch (action.type) {
            case SEARCH_INPUT_CHANGED:
                const { searchTerm } = action.payload;
                return {
                ...state,
                searchTerm: searchTerm,
                projects: searchTerm
                    ? Projects.filter(
                        projects =>
                        projects.name.toLowerCase().indexOf(searchTerm.toLowerCase()) >
                        -1,
                    )
                    : Projects,
                };
            default:
                return state;
        }
    }

searchAction.js:

import { SEARCH_INPUT_CHANGED } from './types';

export const searchTermChanged = (searchTerm) => ({
    type: SEARCH_INPUT_CHANGED,
    payload: { searchTerm }
});

index.js:

import {combineReducers} from 'redux';
import searchReducer from './searchReducer';

export default combineReducers({
    search: searchReducer
})

Снимок экрана:

Answer 1

Рабочий код:

import React, { Component } from 'react';
    import { connect } from 'react-redux';
    import { searchTermChanged } from '../../store/actions/searchAction';

    class Home extends Component {

      render() {

        const { searchTermChanged } = this.props;

        return (
          <div>
              <Navbar/>
              <div className="header">
                <div className="md-form mt-0 customsearch">
                    <input className="form-control" type="text" placeholder="Search projects" aria-label="Search" 
                      value={this.props.search}
                      onChange={e => searchTermChanged(e.target.value)}
                    />
                </div>
              <div class="container-fluid">
                <div class="row">
                  {this.props.projects.map( (val,index) => (
                    <div class="col-3">
                      <Card title={val.title} by={val.by} blurb={val.blurb} 
                      url={val.url} funded={val.funded} backers={val.backers} imgurl={index}/>
                    </div>
                  ))}
                </div>
              </div>
          </div>
        )
      }
    }

    const mapStateToProps = state => ({
      search: state.search.searchTerm,
      projects: state.search.projects
    })

    export default connect (mapStateToProps, dispatch => ({ searchTermChanged: searchTerm => dispatch(searchTermChanged(searchTerm)) }))(Home);

Answer 2

Я думаю, вы не правильно использовали редуктор.Например,

{projects.map( (val,index) => (
                <div class="col-3">
                  <Card title={val.title} by={val.by} blurb={val.blurb} 
                  url={val.url} funded={val.funded} backers={val.backers} imgurl={index}/>
                </div>
              ))}

неверно.Вы использовали projects, импортированный из '../../data/projects'

. Поэтому я рекомендую использовать следующее:

1: удалить оператор импорта для проектов
2: изменить код следующим образом.

render() {
        const { searchTermChanged } = this.props;
        const {projects} = this.props.search; //added
        return (
          <div>
              <Navbar/>
              <div className="header">
                <div className="md-form mt-0 customsearch">
                    <input className="form-control" type="text" placeholder="Search projects" aria-label="Search" 
                      value={this.props.searchTerm}
                      onChange={e => searchTermChanged(e.target.value)}
                    />
                </div>

<div class="container-fluid">
            <div class="row">
              {projects.map( (val,index) => (
                <div class="col-3">
                  <Card title={val.title} by={val.by} blurb={val.blurb} 
                  url={val.url} funded={val.funded} backers={val.backers} imgurl={index}/>
                </div>
              ))}
            </div>
          </div>
          </div>
        )
      }

Answer 3

Создатель действия searchtermChanged должен использоваться вместе с диспетчеризацией, а не вызываться напрямую.Ищите ссылку -

1. https://redux.js.org/basics/actions
2. https://react -redux.js.org / api # connect

Answer 4

Вы импортируете projects в Home компонентном проливе из файла, а не редуктора.

добавьте projects к вашей mapStateToProps функции