javascript - React Redux initialState 与 defaultProps

Question

我正在寻找为容器(这是与 redux 存储连接的智能组件)定义默认 Prop 的最佳实践，我发现至少有两种方法可以实现它。

1. 在我的 reducer 中使用 initialState:

const initialState = {
  name: 'John'
};

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

1. 使用defaultProps

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

哪个最好，为什么？

Answer 1

你应该使用初始状态。 redux 和其他管理应用程序状态的库背后的概念是数据/模型和 View 的严格分离。这些概念使您更容易推理您的代码、重用 View 和独立测试这两者。

如果您使用的是 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'));
});