Question

使用redux制作单页应用并做出反应，首先要做的是什么？首先使用redux创建我的状态逻辑，或者让所有组件首先做出反应？

Answer 1

可能首先要做的是建立你的减速器功能。这是一个例子。我正在使用ES6示例。

const INCREMENT = 'redux-example/counter/INCREMENT';

const initialState = {
  count: 0
};

export default function reducer(state = initialState, action = {}) {
  switch (action.type) {
    case INCREMENT:
      const {count} = state;
      return {
        count: count + 1
      };
    default:
      return state;
  }
}

export function increment() {
  return {
    type: INCREMENT
  };
}

然后你必须创建一个组件：

import React, {Component, PropTypes} from 'react';
import {connectMultireducer} from 'multireducer';
import {increment} from 'redux/modules/counter';

@connectMultireducer(
  (key, state) => ({count: state.multireducer[key].count}),
  {increment}
)
export default class CounterButton extends Component {
  static propTypes = {
    count: PropTypes.number,
    increment: PropTypes.func.isRequired,
    className: PropTypes.string
  }

  props = {
    className: ''
  }

  render() {
    const {count, increment} = this.props; // eslint-disable-line no-shadow
    let {className} = this.props;
    className += ' btn btn-default';
    return (
      <button className={className} onClick={increment}>
        You have clicked me {count} time{count === 1 ? '' : 's'}.
      </button>
    );
  }
}

在组件中，您可以将reducer状态和操作连接到组件，然后将它们包装到容器中并将它们链接到HTML。

希望这有帮助。

Answer 2

我认为这在很大程度上取决于您是否更好地了解数据或更好地理解用户界面。我会写出一个容器组件，然后将所有数据作为状态传递给它，然后将其映射到props。从那里，您可以决定哪些组件需要状态树的哪个部分。然后，您可以通过关注数据来推断组件设计。

这是我勾勒出的一个简单示例：link

Answer 3

首先完成所有组件或首先执行所有组件会出错。

刚开始使用1个组件并将其连接到redux。不要写出不必要的状态或组件。

最好从必要的代码开始，如果需要更改，则修改/重构该代码。

如果您的假设不正确并且事实证明您必须重写预先编写的组件，那么预优化会很痛苦。在项目期间，您总会发现更好的方法来做事情，这样您当时拥有的组件和/或减少器就越多，您所拥有的返工就越多。

构建React / Redux应用程序

3 个答案: