React - 当不同组件更改状态时更新组件

Question

我在标题组件下拉列表中的行为类似于整个应用程序的过滤器。假设我的布局中有网格组件，其中填充了一些数据，例如某年可用的汽车列表。当我从标题年份的下拉列表中选择时，我想更新我的网格组件以仅包含选定年份可用的汽车。

这是我的减速器，带有动作创建器，用于标题组件中的下拉菜单。为简洁起见，我删除了一些代码。

export interface IImporterSelectorContextState {
    dataQuery?: ServiceApi.IDataQuery;
    data?: any[];
    context?: ServiceApi.IDocumentContext
}    
type KnownAction = 
    IChangeCurrentContext

export const actionCreators = {
    changeYearContext: (context: ServiceApi.IDocumentContext) : AppThunkAction<KnownAction> => (dispatch, getState) => {
        dispatch(changeCurrentContext(context));
    }
}

const unloadedState: IImporterSelectorContextState = {
   //removed for brevity
};

export const reducer: Reducer<IImporterSelectorContextState> = (state: IImporterSelectorContextState,
    incomingAction: Action) => {

    const action = incomingAction as KnownAction;
    switch (action.type) {
        case CHANGE_CURRENT_CONTEXT:
            return {
                ...state,
                context: action.context
            }
        default:
            const exhaustiveCheck: never = action;
    }
    return state || unloadedState;
}

When year is selected, changeYearContext function is called, my state is set to new values for header component.我不确切知道如何更新显示汽车的网格组件。要根据我的过滤器获取新数据，我必须发送新请求（获取按钮）以获取新数据，但我想在选择下拉菜单时刷新数据。我怎样才能做到这一点？

Answer 1

您可以通过两种方式实现：

方法1：最简单的，使用你的select组件的onChange属性绑定一个事件处理函数，像这样：

import {Component} from 'react'
class MyHeaderComponent extends Component{
  render(){
    return (
      <select onChange={(e)=>this.changeYearHandler(e.target.value)}>
        <option></option>
        ...
      </select>
    )
  }
  changeYearHandler(value){
    fetch(MY_API_URI, /* and pass value with post json or other way*/).then(data=>{
      // give it to redux via prop bound with react-redux's connect method
      this.props.changeYearContext(data)
    })
  }
}

方法2：使用redux-saga，实现request作为改变redux状态的副作用，用这个方法，首先你改变年份状态，然后，你的数据被加载并推送到状态， 我建议你阅读来自https://github.com/redux-saga/redux-saga的文档