Reactjs 在React/Redux中放置链接操作的位置

相当简单的用例：我有一些操作/事件，它们将导致执行ajax请求，然后更新列表

问题是我不确定如何（特别是，当页面更改时，在哪里启动新列表请求）

redux商店

const defaultStore = {
  list: [],
  page: 1    
};

包装组件

const wrapper = props => (
  <div>
    <List {...props}> {/* This list should have page controls */}
      <PageControls {...props} />
    </List>
    <List /> {/* This list should not have page controls */}
  </div>
);

减速器

function reducer(state = {}, action) {
  switch(action.type) {
    case 'CHANGE_PAGE':
      return {...state, page: state.page + action.delta};
    case 'UPDATE_LIST':
      return {...state, list: action.newList};
    default:
      return state;
  }
}

在这一点上，我可以做几件事--我可以让每个actionCreator触发一个列表更新来分派该操作：

function changePage(delta) {
  return dispatch => {
    dispatch({
      type: 'CHANGE_PAGE',
      delta
    });

    return dispatch(getList(store.getState() + delta));
  }
}

但这看起来很混乱。现在我不仅要得到我的

商店

，还要把影响列表的每一个actionCreator都变成一个thunk

我唯一能想到的另一件事是让我的

组件使用

存储。订阅
某个地方以查看页面的更改，然后启动另一个
getList
操作，但这似乎也让我对Redux和React组件中哪些会触发和哪些不会触发状态更改的理解有所改变

const PageControls = props => (
  <div>
    <span onClick={props.getPage(props.currentPage - 1)}>Backward</span>
    <span onClick={props.getPage(props.currentPage + 1)}>Forward</span>
  </div>
);

有什么想法吗？
好吧，也许你应该改变你的方法。我看不出有理由做出两个动作来更改页面和检索列表。你只需单击按钮发送
getPage（）
动作，传递下一个页码。这应该检索项目列表并刷新页面

在应用商店中，您应该跟踪当前页面，因此每次页面刷新
getPage（）
参数的值时也会更新

例如（假设当前页面未从API检索）：

并将所需组件连接到存储，在您的情况下，它将是
列表
和
页面控件
组件

const PageControls = props => (
  <div>
    <span onClick={props.getPage(props.currentPage - 1)}>Backward</span>
    <span onClick={props.getPage(props.currentPage + 1)}>Forward</span>
  </div>
);

constpagecontrols=props=>(
向后的
向前地
);

这将允许您维护简单干净的代码。您还可以从多个不相关的组件触发它。
这很有效，谢谢。我唯一的问题是，这就是redux的用途吗？我本质上是调用一个执行异步的函数，然后分派一个操作。这似乎与性能没有太大区别在组件中形成异步调用。我认为Redux的思想是状态响应操作提交，而不是在获取状态后调度操作提交。是的。Redux的思想是使应用程序中的每个组件都可以使用全局存储。它也适用于Redux操作。当然，有多种方法可以如何获取数据，然后发送redux操作，但将其保存在一个与组件无关的单一位置始终是最好的主意。这样，您的应用程序在未来将更具可扩展性。组件应始终尽可能简单，并且，它应仅显示数据或接受输入，而无需后台逻辑。您可以也可以阅读关于redux的故事。使用生成器更高级地使用redux。
const PageControls = props => (
  <div>
    <span onClick={props.getPage(props.currentPage - 1)}>Backward</span>
    <span onClick={props.getPage(props.currentPage + 1)}>Forward</span>
  </div>
);

function getPage(page = 1) {
  return dispatch => 
    axios.get(`/path/to/api?page=${page}`)
      .then(res => dispatch(updatePage(res.data, page));
}

function updatePage(newList, currentPage) {
  return { 
    type: 'UPDATE_PAGE',
    newList,
    currentPage,
  };
}

const PageControls = props => (
  <div>
    <span onClick={props.getPage(props.currentPage - 1)}>Backward</span>
    <span onClick={props.getPage(props.currentPage + 1)}>Forward</span>
  </div>
);