redux + react-redux使用和模块化使用

搭配上一篇redux使用

//在项目入口文件
import {Provider} from 'react-redux'
import store from './store
reactDOM.render(
  <Provider store={store}>
    </App>
  </Provider>
)

在组件里面的书写变更

import {connect} from 'react-redux'

@connect(state => ({num: state}))
 class ReduxTest extends Component {
  
 render(){
    return(
       <div>
          {store.getState()}
          <button onClick={()=>this.props.dispatch({type: 'add'})}>+</button>
          <button onClick={()=>this.props.dispatch({type: 'minus'})}>-</button>
       </div>
    )
  }
}
export default ReduxTest 

组件优化,只接受参数,组件更加纯粹

//参数1:mapStateToProps = (state) => {return {num: state}}
//参数2:mapDispatchToprops = dispatch => {return {add:()=>dispatch({type:'add'})}}
import {connect} from 'react-redux'

@connect(
 state => ({num: state}),
 {
   add: ()=>({type: 'add'}),//action creactor
   minus: ()=>({type: 'minus'}) //action creactor
 }
 /*
 完整写法
 dispatch => ({
   add: ()=>dispatch({type: 'add'}),
   minus: ()=>dispatch({type: 'minus'}) 
 })
*/
)
 class ReduxTest extends Component {
  
 render(){
    return(
       <div>
          {store.getState()}
          <button onClick={this.props.add}>+</button>
          <button onClick={this.props.minus}>-</button>
       </div>
    )
  }
}
export default ReduxTest 

如果派发动作时候要加参数

//在组件
//connect里面  add: (num)=>({type: 'add', payload: num}),//action creactor
<button onClick={()=>this.props.add(2)}>+</button>
//在counterReducer里面解构出来
const num = action.payload || 1
switch (action.type) {
 case 'add':
   retune state + num
}

vuex中的action可以支持异步操作,redux默认只支持同步,

在平时项目中redux需要模块化使用

//在创建store的时候
import { createStore, applyMiddleware, combineReducers } from 'redux'
import logger from 'redux-logger'
import thunk from 'redux-thunk'
import { counterReducer } fron './counter'

const store = createStore(
 combineReducers({counter: counterReducer }) ,
 appluMiddleware(logger,thunk)
)
export default store 
//整合之后,在组件应用 
/*
@connect(
  state => ({ num: state.counter })
)
*/