使用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 (
      <React.StrictMode>
        <Router>
          <Route path="/" component={App}>
            <Route  path='/welcome' component={User}/>
          </Route>
        </Router>
      </React.StrictMode>
    )
  }
}
ReactDOM.render((
  <Provider store={store}>
    <Root/>
  </Provider>),
  document.getElementById('root')
);
serviceWorker.unregister();

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

(
  <Provider store={store}>
    <Root/>
  </Provider>)

否则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 (
          <div style={{padding: '50px', background: '#fcf'}}>
              <p className="testP">{count}</p>
              <select ref={s => this.select = s}>
                  <option value="1">1</option>
                  <option value="2">2</option>
                  <option value="3">3</option>
              </select>
              <button onClick={this.addCount}>+&nbsp;&nbsp;</button>
              <button onClick={this.deCount}>-</button>
              <button onClick={this.asyncAddCount}>异步加</button>
            </div>
        )
    }
}
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