redux快速上手

用reflux存在问题

@H_301_4@我们cmdb项目目前是用react reflux 进行构建的，使用起来非常方便

1. @H_301_4@使用Pluginreflux-state-mixin可以快速地通过
   store.setState()方法修改修改组件之间共享数据。

2. @H_301_4@使用Plugin reflux-promise 可以用action().then().catch()解决异步请求回调

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

1. @H_301_4@reflux允许多个入口修改store。
   1. @H_301_4@action修改store

   2. @H_301_4@store中的函数直接修改

   3. @H_301_4@直接setState

2. @H_301_4@直接对reflux store 中定义的对象进行修改，无法修改成功。必须进行深拷贝

3. @H_301_4@高阶组件无法避免重复render （react性能优化）

4. @H_301_4@store定义混乱
   1. @H_301_4@列表数据跟子数据定义在一块

   2. @H_301_4@数据容易重复定义（圈子权限跟用户角色权限）

使用redux

@H_301_4@为什么使用redux

1. @H_301_4@公司其他项目逐渐改用redux

2. @H_301_4@redux 在react生态圈是使用最火的一个框架（之一）

3. @H_301_4@使用redux 正好解决了上述问题

redux的优点

1. @H_301_4@单一store 数据好管理

2. @H_301_4@配合react-redux 可以将数据派发倒任何一个子组件

3. @H_301_4@修改store的唯一方法是dispatch 一个action

step1:定义初始数据

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

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

@H_301_4@使用redux定义初始数据需要定义在一个reducer中，通过一个函数返回需要得到的数据

const initialState =[
            {id:1,];
 function reducer(state = initialState,action) {
    return state
}

step2:创建store

@H_301_4@通过redux的createStore方法创建唯一的store

const store = createStore(
    reducer
)

step3: 安装react-redux

@H_301_4@所有容器组件都可以访问 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

@H_301_4@定义 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,action) {
    switch (action.type) {
        case 'DELETE_ITEM':
          return state.filter(item=>
           item.id !== action.id
          )
        default:
            return state
    }
}

step6 分发 action

@H_301_4@除了读取 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

参考

@H_301_4@redux 中文文档
redux todo