返回介绍

尝试 Reducer 协作

发布于 2025-02-17 12:51:31 字数 2194 浏览 0 评论 0 收藏 0

目前我们的核心函数都是接受整个 state 并返回更新后的整个 state。

这么做在大型应用中可能并不太明智。如果你的应用所有操作都要求必须接受完整的 state,那么这个项目维护起来就是灾难。
日后如果你想进行 state 结构的调整,你将会付出惨痛的代价。

其实有更好的做法,你只需要保证组件操作尽可能小的 state 片段即可。我们这里提到的就是模块化思想:
提供给模块仅它需要的数据,不多不少。

我们的应用很小,所以这并不是太大的问题,但我们还是选择改善这一点:没有必要给 vote 函数传递整个 state,它只需要 vote
部分。让我们修改一下对应的测试代码:

//test/core_spec.js

describe('vote', () => {

  it('creates a tally for the voted entry', () => {
    const state = Map({
      pair: List.of('Trainspotting', '28 Days Later')
    });
    const nextState = vote(state, 'Trainspotting')
    expect(nextState).to.equal(Map({
      pair: List.of('Trainspotting', '28 Days Later'),
      tally: Map({
        'Trainspotting': 1
      })
    }));
  });

  it('adds to existing tally for the voted entry', () => {
    const state = Map({
      pair: List.of('Trainspotting', '28 Days Later'),
      tally: Map({
        'Trainspotting': 3,
        '28 Days Later': 2
      })
    });
    const nextState = vote(state, 'Trainspotting');
    expect(nextState).to.equal(Map({
      pair: List.of('Trainspotting', '28 Days Later'),
      tally: Map({
        'Trainspotting': 4,
        '28 Days Later': 2
      })
    }));
  });
});

看,测试代码更加简单了。

vote 函数的实现也需要更新:

//src/core.js

export function vote(voteState, entry) {
  return voteState.updateIn(
    ['tally', entry],
    0,
    tally => tally + 1
  );
}

最后我们还需要修改 reducer ,只传递需要的 state 给 vote 函数:

//src/reducer.js

export default function reducer(state = INITIAL_STATE, action) {
  switch (action.type) {
  case 'SET_ENTRIES':
    return setEntries(state, action.entries);
  case 'NEXT':
    return next(state);
  case 'VOTE':
    return state.update('vote',
                        voteState => vote(voteState, action.entry));
  }
  return state;
}

这个做法在大型项目中非常重要:根 reducer 只传递部分 state 给下一级 reducer。我们将定位合适的 state 片段的工作
从对应的更新操作中分离出来。

Redux 的 reducers 文档 针对这一细节
介绍了更多内容,并描述了一些辅助函数的用法,可以在更多长场景中有效的使用。

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文