redux快速上手

redux快速上手

用reflux存在问题

咱们cmdb项目目前是用react reflux 进行构建的，使用起来很是方便

1. 使用Pluginreflux-state-mixin能够快速地经过
   store.setState()方法修改修改组件之间共享数据。
2. 使用Plugin reflux-promise 能够用action().then().catch()解决异步请求回调

固然在使用过程当中也发现了一些问题

1. reflux容许多个入口修改store。

   1. action修改store
   2. store中的函数直接修改
   3. 直接setState
2. 直接对reflux store 中定义的对象进行修改，没法修改为功。必须进行深拷贝
3. 高阶组件没法避免重复render （react性能优化）

4. store定义混乱

   1. 列表数据跟子数据定义在一块
   2. 数据容易重复定义（圈子权限跟用户角色权限）

使用redux

为何使用redux

1. 公司其余项目逐渐改用redux
2. redux 在react生态圈是使用最火的一个框架（之一）
3. 使用redux 正好解决了上述问题

redux的优势

1. 单一store 数据好管理
2. 配合react-redux 能够将数据派发倒任何一个子组件
3. 修改store的惟一方法是dispatch 一个action

step1:定义初始数据

开始定义一个component的初始数据会定义在getInitialState中

getInitialState(){
        return {
            list:[
                {id:1,name:'数据1'},
                {id:2,name:'数据2'},
                {id:3,name:'数据3'},
            ]
        }
    }

使用redux定义初始数据须要定义在一个reducer中，经过一个函数返回须要获得的数据

const initialState =[
            {id:1,name:'数据1'},
            {id:2,name:'数据2'},
            {id:3,name:'数据3'},
        ];
 function reducer(state = initialState, action) {
    return state
}

step2:建立store

经过redux的createStore方法建立惟一的store

const store = createStore(
    reducer
)

step3: 安装react-redux

全部容器组件均可以访问 Redux store，可使用React Redux 组件 <Provider> 来让全部容器组件均可以访问 store，
而没必要显示地传递它。只须要在渲染根组件时使用便可。

import React from 'react'
import { render } from 'react-dom'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducer from './reducer'
import App from './components/App'

let store = createStore(reducer)

render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
)

step4 component读取 state

定义 mapStateToProps 这个函数来指定如何把当前 Redux store state 映射到展现组件的 props 中。

import React from 'react'
import { connect } from 'react-redux'

let App=React.createClass({
    render(){
        const {list}=this.props;
        return(
            <div>
                <ul>
                    {list.map((item)=><Item key={item.id} item={item}/>)}
                </ul>
            </div>
        ) 
    }
})

const mapStateToProps = (state) => {
  return {
    list: state
  }
}

 export default connect(
  mapStateToProps,
)(App)

step5 经过action修改redux中的数据

export function deleteItem(id)=>{
    return {
        type:'DELETE_ITEM',
        payload:{
            id:id
        }
    };
}

const initialState =[
            {id:1,name:'数据1'},
            {id:2,name:'数据2'},
            {id:3,name:'数据3'},
        ];
 function reducer(state = initialState, action) {
    switch (action.type) {
        case 'DELETE_ITEM':
          return state.filter(item=>
           item.id !== action.payload.id
          )
        default:
            return state
    }
}

step6 分发 action

除了读取 state，connect()还能分发 action。能够定义 mapDispatchToProps() 方法,
接收 dispatch() 方法并返回指望注入到展现组件的 props 中的回调方法

import React from 'react';
import {deleteItem} from '../actions/index'
import { connect } from 'react-redux'

let App=React.createClass({
    render(){
        const {list,deleteItem}=this.props;
        return(
            <div>
                <ul>
                    {list.map((item)=><Item key={item.id} deleteItem={deleteItem} item={item}/>)}
                </ul>
            </div>
        ) 
    }
})

const mapStateToProps = (state) => {
  return {
    list: state
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
   deleteItem: (id) => {
      dispatch(deleteItem(id))
    }
  }
}

 export default connect(
    mapStateToProps,
    mapDispatchToProps
)(App)

import React from 'react'

let Item=React.createClass({
    render(){
        const {item}=this.props;
        return(
            <li>
               {item.name}<button onClick={()=>this.props.deleteItem(item.id))}}>删除</button>
            </li>
        ) 
    }
})
 export default Item

参考

redux 中文文档
redux todo