react-redux使用、异步中间件、调试插件、封装

使用react-redux 1.下载 redux

npm install --save redux

2.下载react-redux简化redux操作

npm install --save react-redux

3.下载redux-thunk实现redux异步

npm install --save redux-thunk

实现一个简单的同步，异步，组件状态的更新

action.js

/*
 包含所有 action creator
*/

export const addCount = (number) => ({type: 'INCREMENT', data: number})
export const deCount = (number) => ({type: 'DECREMENT', data: number})
// 异步action
export const asyncAddCount = (number) => {
  return dispatch => {
    // 异步代码
    setTimeout(() => {
      // 分发一个action
      dispatch(addCount(number))
    }, 1000)
  }
}

reducer.js

/*
    包含n个reducer函数的模块
 */
import {combineReducers} from 'redux'
function counter(count = 0,action) {
    switch (action.type) {
        case 'INCREMENT':
            return count + action.data
        case 'DECREMENT':
            return count - action.data
        default:
            return count
    }
}
// 有多个时可以同意暴露 store.js 里面引入方式要改变
export default combineReducers({
    counter
})

以上代码提个醒 每增加一个state，都要在combineReducers中 并且要在store.js的createStore中注册

store.js

import {createStore, applyMiddleware} from 'redux'
import thunk from 'redux-thunk';
import counter from './reducer'
// 生成一个store
const store = createStore(
  counter,
  applyMiddleware(thunk)
)
export default store

跟组件配置组件更新 一般为index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {Provider} from 'react-redux'
import store from './redux/store'
import './index.css';
import * as serviceWorker from './serviceWorker';
import {HashRouter as Router,Switch,Route} from 'react-router-dom'
import App from './components/App';
import User from './components/User';
class Root extends React.Component{
  render () {
    return (
      
        
          
            
          
        
      
    )
  }
}
ReactDOM.render((
  
    
  ),
  document.getElementById('root')
);
serviceWorker.unregister();

以上代码提个醒 千万别忘记写

(
  
    
  )

否则state更新了，组件不更新

演示组件 User.jsx

import React,{Component} from 'react'
import store from '../redux/store'
import {connect} from 'react-redux'
import {addCount, deCount,asyncAddCount} from '../redux/action'
class User extends Component{
    constructor(props){
        super(props)
        this.state={
        }
    }
    addCount = () => {
        const num = this.select.value * 1
        store.dispatch(addCount(num))
    }
    deCount = () => {
        const num = this.select.value * 1
        store.dispatch(deCount(num))
    }
    asyncAddCount = () => {
        const num = this.select.value * 1
        store.dispatch(asyncAddCount(num))
    }
    render (){
        let count = store.getState().counter
        return (
          
              {count}
               this.select = s}>
                  1
                  2
                  3
              
              +  
              -
              异步加
            
        )
    }
}
export default connect(
  state => ({count: state.counter})
)(User)

以上代码提个醒 千万不要忘记书写

export default connect(
  state => ({count: state.counter})
)(User)

否则当前state一样不会更新到页面

安装redux调试工具(可选)

下载插件

npm install -–save-dev redux-devtools-extension

修改store.js

import {createStore,applyMiddleware} from 'redux'
import thunk from 'redux-thunk'
import {composeWithDevTools} from 'redux-devtools-extension'
import counter from './reducer'
//引用上异步中间件-浏览器插件调试
// 生成一个store
const store = createStore(
    counter,
    composeWithDevTools(applyMiddleware(thunk))
)
export default store

react调试插件 react-developer-tools.crx