Connect search bar and search results components t

问题:

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, I have an Array of Objects stored in the store in a static manner for now.

like this:

const 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"
   },
]

I am trying to create an action like this:

  { 
    type: "SEARCH",
    payload: {
      pattern: 'Mah'
    } 
  }

and I am dispatching this action. and trying to filter the store based on the pattern. I am taking a pattern and converting it as a RegExp. and using the test function to filter the data.

But somehow, It's not working the data is not getting filtered using RegExp. I am getting the same state even after filtering the data. I am not able to understand whats the problem is:

Here is the full code:

import React from 'react';
import ReactDOM from 'react-dom';
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import App from './App';
import './index.css';

const 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"
   },

  ]
};

function reducer(state = initialState, action) {
  console.log('reducer', state, action); 

  switch(action.type) {
    case 'SEARCH':      
      const updatedPattern =  new RegExp(action.payload.pattern)
      return {
        jsonData: initialState.jsonData.filter(item => updatedPattern.test(item.state))
      };

    default:
      return state;
  }
}

function getState() {
  console.log(initialState.jsonData);
}

const store = createStore(reducer);

store.dispatch(
  { 
    type: "SEARCH",
    payload: {
      pattern: 'And'
    } 
  }
);
getState();



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

回答1:

1. You should change your store display function which always record to origin data

Maybe you can change this to see store change:

function getState() {
  console.log(store.getState());
}

Just console.log(initialState.jsonData); always show the origin data.

2. reducer function always need to change the current state

function reducer(state = initialState, action) {
  console.log('reducer', state, action); 

  switch(action.type) {
    case 'SEARCH':      
      const updatedPattern =  new RegExp(action.payload.pattern)
      return {
        jsonData: state.jsonData.filter(item => updatedPattern.test(item.state))
      };

    default:
      return state;
  }
}

The key change is after: jsonData: state.jsonData.filter(item => updatedPattern.test(item.state))

3. Maybe you can use store.subscribe(handleChange) to get store change

const unsubscribe = store.subscribe(getState)

use the store.subscribe to auto get state change action like react-redux does.

回答2:

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}) => (
  <input onKeyUp={e => 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}) => (
  <div>
    {results.map(item => <div>{JSON.stringify(item)}</div>)}
  </div>
)
//connect global state searchResult to component's results
const mapStateToProps = ({searchResult:results}) => ({results}),
      SearchResultsContainer = connect(mapStateToProps)(SearchResults)
      
//global Povider wrapper
render (
  <Provider {...{store}}>
    <SearchBarContainer />
    <SearchResultsContainer />
  </Provider>,
  document.getElementById('root')
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/redux/4.0.5/redux.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-redux/7.1.3/react-redux.min.js"></script><div id="root"></div>