React-Native学习笔记——react-redux最佳实践基础篇

实践之前首先需要了解一些基本概念。

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

工作流程

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负责提供新数据

最后一张图来总结