react基本使用(三) redux

接上文中继续介绍下redux

1.redux三个核心概念之 action

语法结构示例
var action = {
    type:'biaoshi',
    name: 'zpc'
}
包含两个属性
    type:标识字段，唯一
    name:数据属性 key value形式
创建Action函数
    var a = (data) => ({type:'biaoshi',name:data})

2.redux三个核心概念之reducer

根据原有的state值和action进行更新state的函数
代码示例
    function(state,action){
        switch(action.type){
            case:---:
                return state+1
        }
    }

3.redux三个核心对象之store对象

store对象将action和reducer联系在一起
1：获取store对象
    import {createStore} from 'redux'
    import reducer from './reducers'
    var store = createStore(reducer)
2:此对象的作用
    getState(): 得到state
    dispatch(action)：分发action,出发reducer,产生新的state
    subscribe(listener):注册监听，当产生了新的state时候，自动调用
针对上边三个方法写法示例
    sotre.getState()
    store.dispatch({
        type: 标识字段，
        key:value
    })
    store.subscribe(render)

4.redux代码中基本应用

1:创建reducer.js
export function counter(state=0,action){ // 可以指定初始值
    switch(action.type){
        case:'biaoshi':
        return state + action.data
    }
}
2.创建actions.js文件对action进行封装
export var a = (number)=>{
    type:标识,
    data:number
}
组件中引用使用直接调用即可

3.项目中index.js中引用
import {counter} from 'reducers.js'
import {createStore} from 'redux'
const store = createStore(counter) // 创建store对象

4.组件应用需要把store对象传递给子组件中
ReactDOM.render(<App store={store}>,document.getElementById('根节点'))

上述代码进行调用并不会改变界面效果，只是改变了reducers中state值，并没有造成界面重绘更新
需要进行store监视
store.subscribe(funciton(){
    ReactDOM.render(<App store={store}>,document.getElementById('根节点'))
})


综上根据代码耦合原则进行抽离最后成为4个js文件
store.js
action.js
reducers.js
action-types.js

5.react-redux降低耦合插件

此插件和redux不同  ,是单独的一个插件
为了降低在项目中使用redux代码耦合度比较高的问题--起到简化的作用
npm install react-redux --save

项目中使用从index.js入口文件开始
    import{Provider} form 'react-redux '
    ReactDOM.render((
        <Provider store={store}>
            <App/>
        </Provider>
    ),document.getElementById('根节点'))

在组件内部也需要将redux和组件对象进行关联，react-redux向外暴露了connect函数
import {connect} from 'react-redux'
export default connect( // 将组件进行了进一步的封装并向外暴漏
    state=>{{count:state}},
    {action对象}
)(App)

以上简述，连接的容器组件还可以单独提出一个文件

6.redux异步操作

本身redux默认是不支持异步操作,但是应用中又必须执行异步任务
这时候就需要解决异步的问题
 redux中间件
npm install redux-thunk --save
开始使用在index.js中，为了方便看，下边直接截取网上一段代码图1
组件内部使用异步方法时候，在action中定义执行异步方法，并且注入到连接器对象中 示例如图二

看了下上边的异步函数获取说的没那么详细

 

有一款扩展插件推荐使用  redux-devtools-extension 
配合谷歌插件进行使用 redux-devtools  到谷歌商店自行下载
npm install redux-devtools-extension --save

看最近uni-app使用率在提高，下篇会对uni-app进行一个介绍说明，欢迎留言交流，如果有不对的地方，还望见谅，会及时修改