Question

我正在寻找为容器定义默认道具的最佳实践（这是与redux商店连接的智能组件），我发现至少有两种方法可以实现它。

在我的reducer中使用 initialState ：

const initialState = {
  name: 'John'
};

export default function userState (state = initialState, action) {...}

使用 defaultProps

User.defaultProps = {
  name:'John'
};

哪一个是最好的，为什么？

Answer 1

您应该使用初始状态。 redux和管理应用程序状态的所有其他库背后的概念是严格分离数据/模型和视图。这些概念可以更容易地推断您的代码，重用视图并独立测试。

如果您使用的是redux，我建议您在redux中管理数据（和默认数据）。

分离的测试用例示例：

test('state test', t => {
    t.deepEqual(userState(undefined, { type: '@@INIT' }), { name: 'John' });
    t.deepEqual(
        userState({ name: 'John' }, { type: 'SET NAME', name: 'Isa' }),
        { name: 'Isa' }
    );
});

test('view test', t => {
    t.true(render(<User name="John" />).text().includes('John'));
});

Answer 2

我认为你误解了两个不同的概念。

容器/组件中的道具只是一种告诉组件应该如何查看或处理某些事件的方法。但默认道具不应包含业务逻辑和共享业务数据，如userInformation。

如果你有像userInformation这样的数据，这个数据不仅对于用户容器很重要，而且对其他组件也很有用，只能在商店中存储这些信息。

Answer 3

这个解释帮助我真正区分了props和state，所以我会把它留在这里。

如果我没记错的话，Redux的创建者丹·阿布拉莫夫（Dan Abramov）就这样说了这句话：

我应该使用组件状态来存储X吗？

如果我可以用道具计算X - ＆gt;否。
如果我在渲染方法中使用X 不 - ＆gt;否。
Else - ＆gt;是。

Dan在这里谈的是组件状态，而不是defaultProps，但在这种情况下的原则是相同的。

Redux的目的是为您的应用程序状态提供单一的事实来源。因此，在您的示例中，您希望将默认值（如name: John）存储在Redux存储中。道具总是从商店传递，但是如果你指定defaultProps，那么你将存储应用程序状态存储在商店之外;它不会由您的减速机管理。

Answer 4

最重要的是在整个项目中保持一致。

我认为第一种方法具有优势，或者将与商店相关的所有内容存储在一个文件中。您的userState reducer是有人去的地方，并根据操作类型了解它是如何更新的。去那里看看它是如何发起的似乎是公平的。

React Redux initialState vs defaultProps

4 个答案: