Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to pass input box value to action in react-redux

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
like image 648
vihang shah Avatar asked Jul 19 '17 19:07

vihang shah


People also ask

Can Redux action return value?

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.

What is Redux action payload?

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.

Which component can connect to Redux store and return an action?

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.


1 Answers

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>
)
like image 123
vihang shah Avatar answered Oct 20 '22 17:10

vihang shah