redux学习笔记（2）- 使用react，redux加react-redux

看过网上有很多用的文章，都是分在不同文件里用的。然后各个文件间跳来跳去的，也搞不清楚代码顺序，不知道从哪开始，看也看不懂。

我这里特意放在同一文件里，然后就很容易理清头绪。

下次再拆分到不同文件里去。

使用react-redux有很多区别的地方。

1，首先要多引入react-redux.

import  React  from 'react'
import { render } from 'react-dom'
import { createStore,combineReducers,bindActionCreators} from 'redux'
import { connect,Provider } from 'react-redux'

2，创建reducer和仓库store

// 创建reducer
function addItem(state = [], action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return [action.data, ...state]
    case 'DEL_ITEM':
     state.splice(action.data,1)
      return  [...state]//这里和前一篇稍有变化，因为return的对象指针没改变，会导致store已经更新了，但是react组件没更新
    default:
      return state
  }
}

const rootReducer = combineReducers({
  addItem
})
const store = createStore(rootReducer,window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

3，创建的react组件

class Home extends React.Component{
  addhandle(data){
    this.props.actions.actionAdd(this.textInput.value);//两个action都有变化，调用的是连接的props里的actions
  }
  delhandle(d){
    this.props.actions.actionDelete(d);//两个action都有变化，调用的是连接的props里的actions
  }
  render(){
    const {dataList = []} = this.props;
    return (
      <div>
        <h4>hello world!</h4>
        <input type="text" ref={(input) => { this.textInput = input; }} /><button onClick={this.addhandle.bind(this)}>增加</button>
        <ul>
          {
            dataList.map((k,i)=>{
              return <li key={i}>第{i}条内容是:{k} <a onClick={this.delhandle.bind(this,i)}>删除</a></li>
            })
          }
        </ul>
      </div>
    )
  }
}

4，把子组件连接到store和action

// 获取stateToprops
function mapStateToProps(state) {
  return {
    dataList: state.addItem
  }
}
// 
function actionAdd(data){
  return {
        type: 'ADD_ITEM',
        data
  }
}
function actionDelete(data){
  return {
        type: 'DEL_ITEM',
        data
  }
}
// 获取dispatchToprops并连接上面两个action
function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators({
        actionAdd,
        actionDelete
      }, 
      dispatch
    )
  }
}

const AppHome = connect(
  mapStateToProps,
  mapDispatchToProps
)(Home)

5，渲染主组件

render(
  <Provider store={store}>
    <AppHome />
  </Provider>
  ,

  document.getElementById('content')
)