实践之前首先需要了解一些基本概念。
react-component:
props、state
redux:Store、state、action、reducer
React Component
props
this.props
contains the props that were defined by the caller of this component.
In particular, this.props.children
is a special prop, typically defined by the child tags in the JSX expression rather than in the tag itself.
组件的props属性是定义在组件外部
举栗子
class RecoListComp extends BasePureComponent {
//每个分类
_renderItem = ({item, index}) => {
return (
<RecoItemComp item={item} index={index} changeReco={this.props.changeReco}/>
)
}
export default class RecoItemComp extends BasePureComponent {
render() {
const {item, index} = this.props
const clumnCount = 2 //每行几列
return (
<View key={index} style={styles.itemContainer}>
{this._renderRecoLabel(item, index)}
<GridView
data={item.data}
itemsPerRow={clumnCount}
renderItem={this._renderItem}
/>
</View>
)
}
}
RecoListComp是父组件,RecoItemComp是子组件
RecoListComp中为RecoItemComp传递了三个属性item、index和changeReco
RecoItemComp中通过props获取这些属性值
state
The state contains data specific to this component that may change over time. The state is user-defined, and it should be a plain JavaScript object.
组件的state属性定义在组件内部,是一个普通js对象
举栗子
class Game extends Component {
constructor(props) {
super(props);
this.state = {
history: [{
squares: Array(9).fill(null),
}],
stepNumber: 0,
xIsNext: true,
}
}
取自reactjs官网经典的填字游戏
React-Component的生命周期
上图:
props或state属性变化都会触发组件是否需要重新校验的判断,即执行shouldComponentUpdate()方法
Redux
Redux is a predictable state container for JavaScript apps
Redux是JavaScript应用程序可预测状态的容器,可与多种前端框架整合
React-Redux
工作流程
![](https://cdn-images-1.medium.com/max/1600/1*9kbmrgH8voxp_rx25LPqIw.png)
action
某个操作或事件,如网络请求到返回数据、点击按钮跳转页面
它的定义方式由两种:普通的对象和函数(需要使用redux中间件)
它应该按照组件划分:一个组件可对应多个action
action的由type唯一标识
action是对事件的抽象。
action可以在事件两端的发起者和执行者之间
传递参数。比如网络请求参数(由发起者提供)和返回数据(由执行者提供)
举栗子
普通对象类型
export const getUserInfo = {
type: GET_USERINFO
}
mapDispatchToProps = (dispatch) => {
return {
getUserInfo: () => dispatch(getUserInfo)
}
}
函数类型的action
const refreshHomePageAction = (data = {}) => {
return {
type: REFRESH_HOMEPAGE,
data
}
}
export const refreshHomePage = (dispatch, param) => {
refreshHomePageTask(dispatch, param, refreshHomePageAction)
}
mapDispatchToProps = (dispatch) => {
return {
refreshHomePage: (param) => refreshHomePage(dispatch, param)
}
}
两者区别:
普通对象类型的action是直接dispatch出去的,getUserInfo方法被组件执行后会立刻触发对应type的reducer执行
函数类型的action允许传递dispatch方法,reducer的执行是
可控的,因此可以实现
异步操作
Store
dispatch:分发action
getState:获取state
replaceReducer:替换reducer
subscribe:监听state变化
创建store
因为要实现异步的action,使用了redux-thunk中间件,store的创建也相应变化
创建store时需要绑定reducer
一个应用只有一个store,所以store的创建应该在应用视图顶层
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
const store = createStoreWithMiddleware(allReducers)
redux中的state
它不是指react-component中的state
它由Store管理,state中的数据对应通过connect绑定过的组件所需的props
redux的state是唯一的,这个state的结构被reducer拆分(homeBanner、homeClassify均表示reducer的名称,每个reducer只修改自己对应的那部分state)
绑定过的组件可以从Store中得到属于自己的那部分state
mapStateToProps = (state) => {
return state.homeBanner
}
redux中的reducer
遵循纯函数规则,action的响应者,负责修改redux中的state从而更新组件。
举栗子
export const homeRecolist = (state = initRecolistData(), action) => {
printf('homeRecolist Reducer receive an action:', action)
switch (action.type) {
case GET_RECOLIST:
//获取推荐列表数据
return state
case GET_RECOLIST_BYCATE:
//点击推荐列表项——换一换
let newState = JSON.parse(JSON.stringify(state))
newState = action.data
return newState
default:
return state
}
}
这个函数根据action的type属性对state进行修改,其中action负责提供新数据