Reactjs 跨同一组件的不同实例的独立saga调用/响应？

我对反应、重演和传奇有点陌生，但我已经掌握了窍门

我有一个组件（

Results.jsx

），通过调用外部API的传奇故事来显示特定现实世界事件的结果：

componentDidMount() {
    if (this.props.thing_id) {
        this.props.getResults(this.props.thing_id);
    }
}

这一切都很好。直到我使用了一个选项卡式界面，可以动态添加一组

Results.jsx

的额外实例，这样我就可以在同一屏幕上看到一组不同的结果集

问题是，当加载

Results.jsx

组件的新实例，并从

Results\u data\u REFRESH

dispatch获取数据时，所有

Results.jsx

组件的实例都会使用返回的数据进行更新。它们都显示相同的数据

就我的一生而言，我不知道如何让一个组件的特定实例只侦听它本身发出的结果。我以为这就是传奇故事的运作方式

感谢您的帮助

编辑/回答：

减速机的功能非常简单，如下所示：

const initialState = {
    fetching: false,
    error: null,
    thing_results: {
        data1: null,
        data2: null,
    },
};

export default (state = initialState, action) => {
    switch (action.type) {

        //...

        case "RESULTS_DATA_REFRESH":
            return {...state, fetching: true};
        case "RESULTS_DATA_SUCCESS":
            return {...state, fetching: false, thing_results: action.results.data, error: null};
        case "RESULTS_DATA_FAILURE":
            return {...state, fetching: false, thing_results: null, error: action.error};

        default:
            return state;
    }
};

---

Sagas不过是一个中间件，用于卸载异步任务并存储视图层之外的写操作。最终，组件的道具取决于存储方式。特别是在这种情况下，如果

prop1

和

prop2

是从商店中的同一位置提取的，则在

结果的所有实例中，它将作为相同的值出现

如果您需要不同实例的不同数据，请根据映射到实例的某个唯一id对其进行分区。您将看起来像：

const apiReducer = (state = {}, action) => {
  switch (action.type) {
    case "RESULTS_DATA_REFRESH":
      return {
        ...state,
        [action.payload]: { data: null, fetching: true }
      };
    case "RESULTS_DATA_SUCCESS":
      return {
        ...state,
        /** You should be getting back the id from the api response.
         * Else append the id in the success action from your api saga.
         */
        [action.payload.id]: { data: action.results.data, fetching: false }
      };
    case "RESULTS_DATA_FAILURE":
      return {
        ...state,
        [action.payload.id]: {
          data: null,
          fetching: false,
          error: action.error
        }
      };
    default:
      return state;
  }
};

/** Other reducers */
const otherReducerA = function() {};
const otherReducerB = function() {};

export default combineReducers({ apiReducer, otherReducerA, otherReducerB });

然后像这样访问它：

const mapStateToProps = state => {
  return {
    data: state.apiReducer
  };
};

function Results({ data, thing_id }) {
  return <div>{data[thing_id].data}</div>;
}

const-mapStateToProps=state=>{
返回{
数据：state.api
};
};
函数结果（{data，thing_id}）{
返回{data[thing_id].data}；
}
Sagas不过是一个中间件，用于卸载异步任务并存储视图层之外的写操作。最终，组件的道具取决于存储方式。特别是在这种情况下，如果
prop1
和
prop2
是从商店中的同一位置提取的，则在
结果的所有实例中，它将作为相同的值出现

如果您需要不同实例的不同数据，请根据映射到实例的某个唯一id对其进行分区。您将看起来像：

const apiReducer = (state = {}, action) => {
  switch (action.type) {
    case "RESULTS_DATA_REFRESH":
      return {
        ...state,
        [action.payload]: { data: null, fetching: true }
      };
    case "RESULTS_DATA_SUCCESS":
      return {
        ...state,
        /** You should be getting back the id from the api response.
         * Else append the id in the success action from your api saga.
         */
        [action.payload.id]: { data: action.results.data, fetching: false }
      };
    case "RESULTS_DATA_FAILURE":
      return {
        ...state,
        [action.payload.id]: {
          data: null,
          fetching: false,
          error: action.error
        }
      };
    default:
      return state;
  }
};

/** Other reducers */
const otherReducerA = function() {};
const otherReducerB = function() {};

export default combineReducers({ apiReducer, otherReducerA, otherReducerB });

然后像这样访问它：

const mapStateToProps = state => {
  return {
    data: state.apiReducer
  };
};

function Results({ data, thing_id }) {
  return <div>{data[thing_id].data}</div>;
}

const-mapStateToProps=state=>{
返回{
数据：state.api
};
};
函数结果（{data，thing_id}）{
返回{data[thing_id].data}；
}
您的
reducer
功能是什么样子的？您需要的不是状态中的单个键，而是一个集合。reducer应该只减少实例的状态。@Alex在上面添加了代码。
reducer
函数的外观如何？您需要的不是状态中的单个键，而是集合。reducer应该只减少实例的状态。@Alex在上面添加了代码。我已经读了几遍了，我几乎明白了。我应该在哪里设置
job\u results.thing\u id\u 1.data1
结构？减速机？我必须做一些欺骗才能得到传递给调度的thing_id参数，我想…用一个示例reducer更新了答案我已经读了几遍，我几乎理解了。我应该在哪里设置
job\u results.thing\u id\u 1.data1
结构？减速机？我必须做一些欺骗才能得到传递给调度的thing_id参数，我想…用一个示例减缩器更新了答案