初始化 State

Redux中初始化State的方法
本文介绍了Redux中初始化State的两种方法:使用preloadedState参数和在reducer中设置初始值。当使用createStore时,preloadedState优先级高于reducer中的默认值,适合初始化和更新现有数据。

初始化State的方法有以下方法:

1.在创建store 的时候,createStore()方法的第二个参数preloadeState参数是初始化state的。

2.在reducer中设置state的初始值state={...},也可以使用ES6中默认的参数语法: function myReducer(state = someDefaultValue,action)如下代码:



如果不使用 combineReducers() 或者类似的代码,那么 preloadedState 总是会优先于在 reducer 里面使用 state = ... ,因为 state 传到 reducer 里的 preloadedState 的 state 而不是 undefined,所以 ES6 的默认参数语法并不起作用。

如果使用 combineReducers() 方法,那么这里的行为就会有一些细微的差别了。那些指定了 preloadedState 的 reducer 会接收到那些对应的 state。而其他的 reducer 将会接收到 undefined 并因此回到了 state = ... 这里去获取指定的默认值。

通常情况下,通过 preloadedState 指定的 state 要优先于通过 reducer 指定 state。这样可以使通过 reducer 默认参数指定初始数据显得更加的合理,并且当你从一些持久化的存储器或服务器更新 store 的时候,允许你更新已存在的数据(全部或者部分)。

总结

综上所述,如果你遵守 Redux 的约定并且要让 reducer 中 undefined 的 state 参数返回初始 state (最简单的实现方法就是利用 ES6 的默认参数来指定 state),那么对于组合多个 reducers 的情况,这将是一个很有用的做法,他们会优先选择通过 preloadedState 参数传到 createStore() 的对象中的相应值,但是如果你不传任何东西,或者没设置相应的字段,那么 reducer 就会选择指定的默认 state 参数来取代。这样的方法效果很好,因为他既能用来初始化也可以用来更新现有的数据,不过如果数据没有保护措施的话,这样做也会使一些独立的 reducer 的 state 被重新赋值。当然你可以递归地使用这个模式,比如你可以在多个层级上使用 combineReducers() 方法,或者甚至手动的组合这些 reducer 并且传入对应部分的 state tree。


在React组件中,构造函数 `constructor` 是一个特殊的方法,主要用于两个重要目的:一是通过将对象分配给 `this.state` 来初始化本地状态,二是将事件处理程序方法绑定到实例上 [^3]。 在类的构造函数中为 `state` 赋初值,并且通过 `this.state` 访问数据。以下是一个示例代码,展示了在构造函数中初始化 `state`: ```javascript import React from 'react' export default class StateTest extends React.Component { constructor() { super(); this.state = {date: new Date()}; } render() { return <p>{ this.state.date }</p> } } ``` 在上述代码中,`StateTest` 类组件的构造函数里,调用了 `super()` 来调用父类(`React.Component`)的构造函数,然后通过 `this.state` 初始化了一个包含 `date` 属性的对象,该属性的值为当前日期 [^2]。 另一个示例代码如下: ```javascript class LikeButton extends React.Component { constructor() { super(); this.state = { liked: false }; this.handleClick = this.handleClick.bind(this); } handleClick() { this.setState({liked: !this.state.liked}); } render() { const text = this.state.liked ? 'liked' : 'haven\'t liked'; return ( <div onClick={this.handleClick}> You {text} this. Click to toggle. </div> ); } } ``` 在这个 `LikeButton` 组件中,构造函数同样调用了 `super()`,接着初始化了 `state`,其 `liked` 属性初始值为 `false`,还将 `handleClick` 方法绑定到了当前实例上。在 `handleClick` 方法中,通过 `this.setState` 来更新 `state` [^3]。 还有一个例子: ```javascript constructor(props) { super(props); // 通过给 this.state 赋值对象来初始化内部 state this.state = { isHot: false }; // 为事件处理函数绑定实例 this.changeWeather = this.changeWeather.bind(this); } ``` 此代码片段在构造函数里,接收 `props` 并传递给 `super(props)`,初始化了 `state`,其 `isHot` 属性初始值为 `false`,同时将 `changeWeather` 方法绑定到实例上 [^1]。 综上所述,当在 React 类组件中需要设置 `state` 的初始值或者绑定事件时,就需要使用构造函数,并且在构造函数中要先调用 `super()` 或 `super(props)` 以正确继承父类的属性和方法,再进行 `state` 初始化和事件处理函数绑定 [^1][^2][^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值