Question

相当简单的用例：我有一些操作/事件会导致执行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>
);

列出组件

const List = props => (
  <div>
    {props.children} {/* render page controls if present */}
    {props.items.map((item, k) => <div key={k}>item</div>
  </div>
);

寻呼机控制组件

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

actionCreator

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

// utilizes react-thunk middleware
function getList(page = 1) {
  return dispatch => 
    axios.get(`/path/to/api?page=${page}`)
      .then(res => dispatch(updateList(res.data));
}

function updateList(newList) {
  return { 
    type: 'UPDATE_LIST',
    newList
  };
}

减速器

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

但这看起来很混乱。现在我不仅需要获取store，而且还必须将影响列表的每个actionCreator变为thunk。

我能想到的另一件事就是让我的<List>组件在某个地方使用store.subscribe来监视页面的更改，然后启动另一个getList操作，但这似乎也是就像我正在理解从Redux和React组件中发生和不触发状态变化的内容。

有什么想法吗？

Answer 1

好吧，也许你应该改变你的做法。我没有理由为更改页面和检索列表而采取两项措施。您只需按下按钮即可发送getPage()操作，并传递下一页编号。这应该检索项目列表并刷新页面。

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

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

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

并将所需的组件连接到商店，在您的情况下，它将是List和PageControls组件。

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

这将允许您维护简单而干净的代码。您也可以从多个而非相关组件触发它。

在React / Redux

1 个答案: