Connect search bar and search results components to global state

Question

I am new to ReactJS and I recently came up with this redux date store that react uses mostly. I am trying to have a good grasp on it.

Just for the understanding purpose,

Answer 1

Since both OP's approach and accepted answer have several critical flaws let me share my suggestions:

• you don't want to replace source array within your current state with its filtered copy - if you typed Mah within your search bar and just one second later decided to search for elh you may get an empty search results if your previously filtered array didn't contain matches (while original one did);
• using RegExp test() for basic case-insensitive partial match is an absolute overkill, there's a much less expensive option, based on Array.prototype.includes() together with Array.prototype.some() if required (you may refer live-snippet on the bottom for example);
• both earlier posted solutions suggest using subscribe... store.dispatch() pattern to access globally stored state variables, which is not recommended

If you really need to keep your search results stored within global state and you want to obtain those through dispatching corresponding action (e.g. SEARCH) and accessing global searchResults within arbitrary component connect() method, combined with mapDispatchToProps() and mapStateToProps(), respectively, should be used.

You may find the live-demo below:

//dependencies
const { render } = ReactDOM,
      { createStore } = Redux,
      { connect, Provider } = ReactRedux
      
//search action, initial state, reducer, store
const SEARCH = 'SEARCH',
      initialState = {jsonData:[{"id":"1","country":"India","state":"Andhra_Pradesh","city":"Amaravati","station":"Secretariat, Amaravati - APPCB","last_update":"18-12-2019 09:00:00","pollutant_id":"PM2.5","pollutant_min":"62","pollutant_max":"278","pollutant_avg":"139","pollutant_unit":"NA"},{"id":"2","country":"India","state":"Andhra_Pradesh","city":"Amaravati","station":"Secretariat, Amaravati - APPCB","last_update":"18-12-2019 09:00:00","pollutant_id":"PM10","pollutant_min":"74","pollutant_max":"136","pollutant_avg":"104","pollutant_unit":"NA"},{"id":"149","country":"India","state":"Delhi","city":"Delhi","station":"Lodhi Road, Delhi - IMD","last_update":"18-12-2019 09:00:00","pollutant_id":"NO2","pollutant_min":"NA","pollutant_max":"NA","pollutant_avg":"NA","pollutant_unit":"NA"},{"id":"150","country":"India","state":"Delhi","city":"Delhi","station":"Lodhi Road, Delhi - IMD","last_update":"18-12-2019 09:00:00","pollutant_id":"CO","pollutant_min":"34","pollutant_max":"117","pollutant_avg":"57","pollutant_unit":"NA"}], searchResult:[]},
      appReducer = (state=initialState, action) => {
        switch(action.type){
          case SEARCH : {
            const {jsonData} = state,
                  {searchedString} = action,
                  searchResult = searchedString.length ? 
                    jsonData.filter(item => 
                      Object.values(item).some(val =>
                        val
                          .toLowerCase()
                          .includes(searchedString.toLowerCase()))) :
                    []
            return {...state, searchResult}
          }
          default: return state
        }
      },
      store = createStore(appReducer)

//searchbar ui component
const SearchBar = ({searchResults}) => (
   searchResults(e.target.value)} />
)

//connect searchbar component's searchResult prop to dispatching SEARCH action
const mapDispatchToProps = dispatch => ({
        searchResults: val => dispatch({type: SEARCH, searchedString: val})
      }),
      SearchBarContainer = connect(null, mapDispatchToProps)(SearchBar)
      
//search results ui component
const SearchResults = ({results}) => (
  

    {results.map(item => 
{JSON.stringify(item)}
)}
  
)
//connect global state searchResult to component's results
const mapStateToProps = ({searchResult:results}) => ({results}),
      SearchResultsContainer = connect(mapStateToProps)(SearchResults)
      
//global Povider wrapper
render (
  
    
    
  ,
  document.getElementById('root')
)