ReactNative Redux基本使用

在RN里, 每个组件有两个属性, state 和 props, 他们都是对象, 里面可以包含多个属性

• state 负责记录组件状态, 组件根据不同的 state 内容展示不同的样式或拥有不同的功能, 使用setState方法改变 state 会重新刷新组件
• props 负责接收初始化属性和存储属性, 一般里面的内容不会改变.

可以理解为, 会改变组件功能或样式的 存state, 否则存props

Redux是专门管理 state 的框架, 它把 state 集中在一起管理, 让UI组件只专注于显示样式.

Provider: redux 内置的组件, 这个组件不负责UI显示 只处理逻辑, 对 state 的操作, 其实就是改变它的 state

store: redux 要求, 每个项目有且仅有一个 store, 用来管理整个项目的 reducer

reducer: 一个函数, 当action改变或者初始化的时候被调用, 根据不同的action 返回不同的state, 返回的 state 交给 Provider

action: UI组件的事件, 通过 reducer 来处理

state: Provider 的 state, 想要更改 state 只可以通过 action 事件引发的 reducer 函数改变

Redux工作流程

Redux工作流程

例子:

/** UI组件 */
class Page extends Component {
    render() {
        // 这里是从props里面取出 propsAction 和 propsText 这两个属性, 这里不能写错名字, 要和下面的 mapStateToProps和 mapDispatchToProps 方法里面的相同
        const {propsAction,propsText} = this.props;
        return(
            <View style = {{width:'100%', height:'100%', backgroundColor:'yellow'}}>
                <Text style = {{height:30, width:'100%', backgroundColor:'green'}}>{propsText}</Text>
                <TextInput onChangeText = {propsAction} style = {{height:30, width:'100%', backgroundColor:'white'}} ></TextInput>
            </View>
        )
    }
}

// state的初始值 或者默认值
const initState = {
    text:'123'
}

// action的type 
const TYPE_KEY = 'TYPE_KEY'

// action改变的时候会调用这个方法 根据不同的action 返回对应的state
const reducer = (state = initState, action) => {
    switch (action.type) {
        case TYPE_KEY: {
            return {...state, text: action.newText}
        }
        default: return initState
    }
}

/**
* 建立state和UI组件的映射关系 把state.text 映射到UI组件的props.propsText上面
* 当state 改变的和初始化的时候会调用这个方法 更新propsText的值
*/
const mapStateToProps = (state) => {
    return {
        propsText:state.text // 这个propsAction 要和UI组件的props中的属性名对应
    }
}

/* 
* 建立Action和UI组件的映射关系, 说是映射倒不如说是给UI组件的props.prosAction赋值
* 当UI组件触发事件的时候调用, dispatch会调用reducer方法改变state
*/
const mapDispatchToProps = (dispatch) => {
    return {
        propsAction:(changedText) => { // 这个propsAction 要和UI组件的props中的属性名对应
            dispatch({
                type:TYPE_KEY, // type是判断action类型的依据,其他属性名可以不同或者没有, type必须有
                newText:changedText, // 这个属性要在reducer中用, 这两处属性名要相同
            })
        }
    }
}
// 一个应用只应该有一个store , 因为例子比较简单所以就写这里了
const store = createStore(reducer);
// 绑定UI组件和映射方法
const APP = connect(mapStateToProps, mapDispatchToProps)(Page);
export default class Index extends Component {
    render() {
        return (
            <Provider store={store}>
                <APP></APP>
            </Provider>
        );
    }
}