将搜索栏和搜索结果组件连接到全局状态 [英] Connect search bar and search results components to global state

问题描述

我是 ReactJS 的新手，我最近想出了这个 React 主要使用的 redux 日期存储.我正在努力掌握它.

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.

像这样:

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'
    } 
  }

我正在调度这个动作.并尝试根据模式过滤商店.我正在采用一种模式并将其转换为 RegExp.并使用测试函数过滤数据.

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.

但不知何故，它不起作用，数据没有使用 RegExp 过滤.即使在过滤数据后，我也得到相同的状态.我无法理解问题是什么:

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:

完整代码如下:

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); 总是显示原始数据.

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

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;
  }
}

关键变化在:jsonData: state.jsonData.filter(item => updatedPattern.test(item.state))

const unsubscribe = store.subscribe(getState)

使用 store.subscribe 自动获取状态更改操作，就像 react-redux 一样.

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

这篇关于将搜索栏和搜索结果组件连接到全局状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！