react+redux基础用法

在学react的是，发现一旦我们封装好了我们的组件，那么我们的项目就跟搭积木一样简单快速，可是我们发现了一个问题，在一个页面往往会嵌套很多的组件，子组件必须要通过父组件传递参数才能渲染出数据，我们回想一下我们之前构建过的所有react应用，数据都是由最顶层父组件（页面组件）一层层向下传递的。

这也是深层次的组件之间通讯困难的原因：数据的传递是单向的，子组件的数据只能就近获取，但是真正的数据源却离得太远，没有捷径可以直接通知数据源更新状态。

redux的出现改变了react的这种窘迫处境，它提供了整个应用的唯一数据源store，这个数据源是随处可以访问的，不需要靠父子相传，并且还提供了（间接）更新这个数据源的方法，并且是随处可使用的！

那么redux是如何工作的呢？这里我借用阮一峰react讲解redux的图来说明：

用户看到的是能是我们的页面，那么用户如何跟我们的数据互动呢。首先初始化页面，我们会渲染store里面的初始数据，

store 是redux提供的唯一数据源，它存储了整个应用的state，并且提供了获取state的方法，即store.getState()。

现在用户点击了某个按钮，那么这个时候用户就触发了一个动作，称之为action，action只是记录了你刚才"做了什么动作"，但是就是知道你干了这个事情，至于事情会发生什么作用，这个并不是你说的算的，就要引入我们的reducer了，如果说action就是你平常做的事，那么reducer就是国家的法律，根据你的事法律会给你相应的后果。

1.我们先看action

action是一个对象，记录本次事件的类型，以便对应相应的结果，除了type属性的其他属性我们称之为载荷（payload），除了type属性外，其他属性都是非必选的。

{

  type: 'CHANGE_LIST',

  data: [1,2,3,4]//这个是假数据，这里当做需要变成的数据，一般是后台拿到的

}

接下来我们要触发这个事件

2.在redux中触发这个事件的方式就是：

dispatch({

  type: 'CHANGE_LIST',

  data:[1,2,3,4]

})

3.到这里我们触发了事件，那么事件会产生啥效果呢，这里就提到我们的reducer

假设我们现在有一个列表组件，那么它的数据格式应该可以如下：

// store.getState()

{

  list: {

        products:['name','age','haha','gege']

  }

}

现在我们做了步骤2的action操作，那么reducer应该是这样的：

function reducer(state, action) {

  switch (action.type) {

    case 'CHANGE_LIST':

    return {

      list: {

        products:action.data//修改给定的数据

      }

    }

    default:

    return state  // 没有匹配的action type，返回原来的state

  }

}

到此为止我们知道这个操作会产生的效果就是原来的数组products从 ['name','age','haha','gege'] 变成了 [1,2,3,4]。

4.拆分reducer

我们在react真实的项目肯定包含许多的组件，不能把所有组件的reducer写在一个函数里面，这样会显得更复杂以及文件特别大，所以我们把上面的reducer改写一下

function listReducer(state, action) {

  switch (action.type) {

    case 'CHANGE_LIST':

    return {

        products:action.data//修改给定的数据

    }

    default:

    return state  // 没有匹配的action type，返回原来的state

  }

}

function reducer(state, action) {

  return {

    list: listReducer(state.list, action),

  }

}

可以看出达到的效果是一致的，刚好redux为reducer的合并提供了一个简单的方法combineReducers,

function list(state, action) {

  switch (action.type) {

    case 'CHANGE_LIST':

    return {

      products:action.data

    }

    default:

    return state  // 没有匹配的action type，返回原来的state

  }

}

function dialog(state, action) {

  switch (action.type) {

    case 'SHOW_DIALOG':

    return {

      status: true

    }

    case 'CLOSE_DIALOG':

    return {

      status: false

    }

    default:

    return state  // 没有匹配的action type，返回原来的state

  }

}

export default combineReducers({

  list,

  dialog

})

5.生成store，在我们项目的入口文件app.js中：

import React, { Component, PropTypes } from 'react'

import ReactDom from 'react-dom'

// 引入redux

import { createStore, applyMiddleware } from 'redux'

import { Provider, connect } from 'react-redux'

// 引入reducer

import * as reducers from './redux/reducer.js'

import { combineReducers } from 'redux'

//引入组件

import Index from './component/index.js'

//把多个组件的reducer合成总的reducer

const reducer = combineReducers(reducers)

// 创建store，这个是整个应用唯一的

const store = createStore(reducer)

ReactDom.render(

    <Provider store={store}>

        <Index />

    </Provider>,

    document.getElementById('root')

)

然后看看我们的Index组件是个啥样子：

import React, { Component } from 'react'

import { connect } from 'react-redux'

import List from './list.js'

class Index extends Component {

    constructor(props) {

        super(props);

    }

    render () {

        return (

            <div>

                <List />

            </div>

        )

    }

}

function mapStateToProps(state) {

    return state  //对应本组件需要的传入的props

}

export default connect(mapStateToProps)(Index)//关联到store上

下面最重要的看看List组件：

import React, { Component } from 'react'

import PropTypes from 'prop-types'

import { connect } from 'react-redux'

class List extends Component {

    constructor(props) {

        super(props);

    }

    render() {

        var html = this.props.products.map(function(val,i) {

            return <li key={i}>{val}</li>

        })

        return (

            <div>

                <ul>

                    {html}

                </ul>

                <button onClick={this.props.change}>改变数组</button>

            </div>

        )

    }

}

function mapStateToProps(state) {

    var info = state.list

    return {

        products:info.products//对应本组件props需要的属性products

    }

}

function mapDispatchToProps(dispatch) {

  return {

    change () {//这里change方法对应的是这个组件需要外部传入的change方法

                dispatch({

                    type: 'CHANGE_LIST',

                    data:[1,2,3,4]

                })

            }

        })

    }

  }

}

export default connect(mapStateToProps,mapDispatchToProps)(List)

这里只是简单介绍了redux基本知识，但是在实际的项目中如何应用呢，实际的项目react和redux结合如何搭建框架呢，这个下篇文章将会列出一个真实的项目。

巴特西

react+redux基础用法

最新文章

热门文章