How to change the state of e.target.value with Redux/React? - reactjs

Question

This is part of an extensive application so i will just post the relevant parts. I'm trying to implement an e.target.value onChange from my App.js up to the index.js file of the application. The app loads but breaks the moment a value is inserted in the input field and I'm referring to the mapDispatchToProps function:
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);
and the index file is as below:
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'));
The switch layout function works as intended, so could you tell me what I'm doing wrong with the onSearchChange function?

Answer 1

In your Navbar component you're passing onSearchChange prop as an anonymous function that calls this.props.onSearchChange with e.target.value - so you're passing the exact value to the callback while the callback in mapDispatchToProps you're defining onSearchChange as a function that accepts the change event. That's why you're getting an error when you change the search input value.
You have 2 options here, either you pass just an event to onSearchChange in the Navbar component:
<Navbar searchTerm={this.props.searchItunes.searchTerm}
onSearchChange={this.props.onSearchChange} />
or change the onSearchChange signature so that it accepts only the final value:
onSearchChange: (value) => {
dispatch({
type: "SEARCHTERM",
payload: value
});
}

Answer 2

<Navbar
searchTerm={this.props.searchItunes.searchTerm}
onSearchChange={(e) =>this.props.onSearchChange(e.target.value)}
/>
In the method call you are sending the value of the event, your search term, so in mapDispatchToProps you don't need to send the whole event again, you just need to send the string you are setting in onSearchChange, because in your reducer you are setting the full action payload to the searchTerm reducer attribute.
const mapDispatchToProps = (dispatch) => {
return {
switchLayout: () => {
dispatch({
type:"GRID"
});
},
onSearchChange: (term) => {
dispatch({
type:"SEARCHTERM",
payload: term,
});
}
};
};