Как изменить состояние e.target.value с Redux / React? - PullRequest
Новая
       27

Как изменить состояние e.target.value с Redux / React?

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

Это часть обширного приложения, поэтому я просто опубликую соответствующие части.Я пытаюсь реализовать onChange e.target.value из моего App.js до файла index.js приложения.Приложение загружается, но прерывает момент вставки значения в поле ввода, и я имею в виду функцию mapDispatchToProps: 

App.js
import React, { Component } from 'react';
import Navbar from './components/Navbar';
import ToggleLayout from './components/ToggleLayout';
import { connect } from 'react-redux';


class App extends Component {

  render() {
    return (

       <div>
          <Navbar
            searchTerm={this.props.searchItunes.searchTerm}
            onSearchChange={(e) =>this.props.onSearchChange(e.target.value)}
          /> 

          <ToggleLayout
            switchLayout={()=> this.props.switchLayout()}
            grid={this.props.toggle.grid}
          />
      </div>

    );
  }
}

const mapStateToProps = (state) => {
  return {
    toggle: state.booleanReducer,
    searchItunes: state.searchItunesReducer
  };
};

const mapDispatchToProps = (dispatch) => {
  return { 
    switchLayout: () => {
      dispatch({
        type:"GRID"
      });
    },
    onSearchChange: (e) => {
      dispatch({
        type:"SEARCHTERM",
        payload:e.target.value
      });
    }
  };
};


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

, а индексный файл выглядит так: 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import  { Provider }  from 'react-redux';
import { createStore, combineReducers, applyMiddleware } from 'redux';


const booleanReducer = (state = { grid:true, additionalPages:false }, action) => {
  if (action.type === "GRID"){
    return state = {
      ...state,
      grid:!state.grid
    }
  }
  return state;
};

const searchItunesReducer = (state = { searchTerm:'', itunes:null }, action) => {
  if (action.type === 'SEARCHTERM'){
    return state = {
      ...state,
      searchTerm:action.payload
      }
    }
  }


const store = createStore(combineReducers({booleanReducer,searchItunesReducer}));
console.log(store.getState());

store.subscribe(() =>{
  console.log("store updated!", store.getState());
});


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

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

Ответы [ 2 ]

0 голосов
/ 28 мая 2018 
<Navbar
  searchTerm={this.props.searchItunes.searchTerm}
  onSearchChange={(e) =>this.props.onSearchChange(e.target.value)}
/>

При вызове метода вы отправляете значение события, ваш поисковый термин, поэтому в mapDispatchToProps вам не нужно повторно отправлять событие целиком, вам просто нужно отправить строку, которую вы устанавливаетев onSearchChange, потому что в вашем редукторе вы устанавливаете полезную нагрузку полного действия на атрибут searchTerm reducer. 

const mapDispatchToProps = (dispatch) => {
  return { 
    switchLayout: () => {
      dispatch({
        type:"GRID"
      });
    },
    onSearchChange: (term) => {
      dispatch({
        type:"SEARCHTERM",
        payload: term,
      });
    }
  };
};
0 голосов
/ 28 мая 2018

В вашем Navbar компоненте вы передаете onSearchChange prop как анонимную функцию, которая вызывает this.props.onSearchChange с e.target.value - так что вы передаете точное значение обратному вызову во время обратного вызова в mapDispatchToPropsВы определяете onSearchChange как функцию, которая принимает событие изменения.Вот почему вы получаете сообщение об ошибке при изменении входного значения поиска.

У вас есть 2 варианта здесь, либо вы просто передаете событие onSearchChange в компоненте Navbar:

<Navbar searchTerm={this.props.searchItunes.searchTerm} onSearchChange={this.props.onSearchChange} />

или измените подпись onSearchChange, чтобы она принимала только окончательное значение:

onSearchChange: (value) => { dispatch({ type: "SEARCHTERM", payload: value }); }

...