sorry for combining 2 questions here. I am writing simple search/filter application. previously only my component was present so I was able to input text value easily. but now I started writing my container part,so I am confused that how should I pass user value to the action? and my 2nd question how will I write fetched result back to my page
here is my SearchContainer
import Search from "../components/Search"
import React from "react"
import {connect} from "react-redux"
import {search} from "../action/SearchAction"
import {bindActionCreators} from 'redux';
const SearchContainer = ({search}) =>(
<Search nameSearch={(value) => search(value)}/>
)
const mapDispatchToProps= (dispatch) => (
bindActionCreators({search},dispatch)
)
const mapStateToProps= state => {
console.log("state",state)
return{
results:state.searchResult.values
}
}
export default connect(
mapStateToProps,
mapDispatchToProps
) (SearchContainer)
here is my search page
import React from "react"
import Select from "react-select"
import {connect} from "react-redux"
const Search = ({nameSearch}) => {
// const {search,value} = this.props
return (
<div>
<input name="search" id="searchbutton" onKeyUp= {nameSearch}></input>
</div>
)
}
export default Search
Redux actions do not return anything. They just trigger changes of the global state which you can then listen to. If you need to e.g. fetch data (to update the state with) inside an action you need some kind of async action which e.g. redux-thunk provides.
Actions are the only source of information for the store as per Redux official documentation. It carries a payload of information from your application to store. As discussed earlier, actions are plain JavaScript object that must have a type attribute to indicate the type of action performed.
Overview The connect() function connects a React component to a Redux store. It provides its connected component with the pieces of the data it needs from the store, and the functions it can use to dispatch actions to the store.
I got my answer from here so I changed my search.js like this
return (
<div>
<input name="search" id="searchbutton" onKeyUp= {(event) => nameSearch(event.target.value)}></input>
</div>
)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With