Провайдеру не удается передать состояние в качестве реквизита в реагировать на избыточность - PullRequest
Новая
       4

Провайдеру не удается передать состояние в качестве реквизита в реагировать на избыточность

1 голос
/ 04 июня 2019

Я пытаюсь создать окно поиска с использованием приставки, но каждый раз, когда я запускаю код, который кажется безупречным, появляется какая-то ошибка. Это показывает, что состояние не определено, за которым следует ошибка в файле webpack_require с узламодули.В другой раз он показал, что searchField не определен.Любая помощь будет высоко оценена.

Действия: 

import { CHANGE_SEARCH_FIELD } from './constants.js';

export const setSearchField=(text)=>({
    type: CHANGE_SEARCH_FIELD,
    payload: text
})

Редукторы: 

import { CHANGE_SEARCH_FIELD} from './constants.js';

const initialState={
    searchField: ''
}

export const searchRobots=(state=initialState, action={})=>{
    switch(action.type){
        case CHANGE_SEARCH_FIELD:
            return Object.assign({},state,{searchField: action.payload});
        default: return state;
    }
}

index.js: 

import ReactDOM from 'react-dom';
import {Provider} from 'react-redux';
import {createStore} from 'redux';
import './index.css';
import 'tachyons';
import App from './App.js'
import * as serviceWorker from './serviceWorker';
import {searchRobots} from './reducers.js';

const store= createStore(searchRobots);

ReactDOM.render(<Provider store={store}><App /></Provider>, document.getElementById('root'));

serviceWorker.register();

Контейнер:

import React, {Component} from 'react';
import {connect} from 'react-redux';
import CardList from './CardList';
import SearchBox from './SearchBox';
import Scroll from './Scroll';
import {setSearchField} from './actions.js'
import './App.css';

const mapStateToProps=(state)=>{
    return {
        searchField: state.searchRobots.searchField
    }
}

const mapDispatchToProps=(dispatch)=>{
    return {
        onSearchChange: (event)=>{
            dispatch(setSearchField(event.target.value))
        }
    }
}

class App extends Component{
    constructor(){
        super()
        this.state={
            robots: [],
        }
    }


    componentDidMount(){
        fetch('https://jsonplaceholder.typicode.com/users')
        .then(
            response=>{return response.json();}
            )
        .then(
            users=>{this.setState({robots: users});}
            );
    }
    render(){
        const {searchField,onSearchChange}=this.props;
        const filteredRobots= this.state.robots.filter(robot=>{return robot.name.toLowerCase().includes(searchField.toLowerCase())});
        return(
        <div className='tc'>
            <h1 id="robo">ROBOFRIENDS</h1>
            <SearchBox searchChange={onSearchChange}/>
            <Scroll>
                <CardList robots={filteredRobots} />
            </Scroll>
        </div>
        );
    };
}

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

Любые сообщения об ошибке будут высоко оценены

...