0

使用 redux 和 react 制作单页应用程序，首先要做的是什么？先用redux创建我的状态逻辑还是让所有组件先反应？

4

3 回答 3

1

你会犯一个错误，先做所有组件或先做所有状态。

只需从 1 个组件开始并将其连接到 redux。不要编写还不需要的状态或组件。

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

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

于 2016-02-28T15:06:53.790 回答
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。

希望这可以帮助。

于 2016-02-28T04:58:05.033 回答
1

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

这是我草拟的一个简单示例：https ://github.com/matthewkturner/redux-simple-boilerplate

于 2016-02-28T08:11:31.567 回答