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