Question

我是React / Redux的初学者，只是有关默认状态的问题。我看到了一些这样的代码：

const filtersReducerDefaultState = {
    text: 'Coffee',
    sortBy: 'date',

};

export default (state = filtersReducerDefaultState, action) => {
    switch (action.type) {
        case 'SET_TEXT_FILTER':
           return {...state, text:action.text};
        case 'Sort_BY_AMOUNT':
           return {...state, sortBy:'amount'};
        case 'Sort_BY_DATE':
           return {...state, sortBy:'date'};
        case 'SET_START_DATE':
           return {...state, startDate:action.startDate};
        case 'SET_END_DATE':
           return {...state, endDate:action.endDate};
        default:
           return state;
    }
};

and then use redux' s createSotre

然后，它尝试通过在类似这样的组件中使用“连接”来访问状态：

this.props.filter.text

我不知道它是如何工作的，因为在生成动作时，reducer仅使用默认状态。那么如何在不分派动作的情况下设置此默认状态呢？谁能详细说明如何在不调度动作的情况下将'filtersReducerDefaultState'设置为默认状态

Answer 1

在此处引用官方Redux documentation

有两种主要方法可以初始化应用程序的状态。 createStore方法可以接受可选的preloadedState值作为其第二个参数。减速器还可以通过查找未定义的传入状态参数，然后返回要用作默认值的值来指定初始值。这可以通过在reducer内进行显式检查或使用ES6默认参数值语法来完成：function myReducer（state = someDefaultValue，action）

您发布的设置使用第二种初始化redux状态的方法，这是ES6的默认参数。在Redux分派了初始操作后，reducer将state设为undefined，并且当您使用默认参数（即(state = filtersReducerDefaultState) => ...）时，default的情况为{ {1}}将返回switch。

Answer 2

Redux用伪动作调用化简器以初始化状态。这就是状态参数的默认值变为初始状态的方式。

更多信息here：

Redux初始化时，将分派“虚拟”动作来填充州。因此，您的计数器reducer的状态等于未定义。

Answer 3

默认状态由initialState设置。在您的情况下，可以使用filtersReducerDefaultState。稍后，如果您想更改redux状态，则需要调度一个动作。初始状态就像您的构造函数中的this.state一样，调度一个动作就像this.setState

如何在React中设置默认状态？

3 个答案: