redux用法完美版，react+react-router-dom+redux

1.action-types.js

//所有actions函数的`type`字符串常量
export const STORE_UPDATE = 'STORE_UPDATE';
export const STORE_ADD = 'STORE_ADD';
export const STORE_RM = 'STORE_RM';

2.actions.js

//定义`action`创建函数生成`action`对象
import * as actionTypes from './action-types.js'

export function update(data) {
    console.log(data,'data')
    return {
        type: actionTypes.STORE_UPDATE,
        data:data
    }
}

export function add(item) {
    return {
        type: actionTypes.STORE_ADD,
        data: item
    }
}

export function rm(item) {
    return {
        type: actionTypes.STORE_RM,
        data: item
    }
}

3.index.js

//生成store容器

import { createStore } from 'redux';
import Reducers from './reducers';

export default function configureStore(initialState) {
    const store = createStore(Reducers,initialState,
        // 触发 redux-devtools
        window.devToolsExtension ? window.devToolsExtension() : undefined
    );
    return store;
}

4.reducer.js

//定义Redux规则
import { combineReducers } from 'redux';
import * as actionTypes from './action-types.js';
import initialState from './state.js';

const userInfo = (state = initialState, action) => { 
    console.log(action.data,'action')
    switch (action.type) {
        case actionTypes.STORE_UPDATE:
            // state.userName=action.data;
            // console.log(state.userName)
            // return state;
            // 利用拷贝进行动态渲染 
            return Object.assign({}, state,{userName:action.data});
        case actionTypes.STORE_ADD:
            state.id.unshift(action.data.id);
            return state;
        case actionTypes.STORE_RM:
            state.id = state.id.filter(item => {
                if(item !== action.data.id) {
                    return state.id;
                }
            })
            return state;
        default:
            return state
    }
}
export default combineReducers({
    userInfo
})
// export default combineReducers({
//     userInfo
// })

5.state.js

//Redux全局初始状态
export default {
    cityName: '北京',//定位地址 默认北京
    userName: 'wangming',//用户名
    id:[],
    // type:'STORE_UPDATE',
    // data: '123'
}

6.在react中的实际应用

import React, { Component } from 'react';
import { HashRouter, Switch, Route, Redirect,withRouter } from 'react-router-dom';
import {update} from '../../redux/actions'
import { connect } from 'react-redux'
class Dlist extends React.Component {
    constructor(props) {
        super(props)
        this.state = {isToggleOn: true,dmt:'12'};
        // this.handleClick2 = this.handleClick2.bind(this); 
    }
    handClick=()=>{
        console.log('btn is click');
        this.setState({
            dmt: '13'
          });
        console.log(this.refs.myNum.value);
    }
    // 必须使用箭头函数才能取到this
    handClick2=()=>{
        console.log('接收传递的消息');
        this.props.func();
        console.log(this);
    }
   
render() {
    // const { getFieldProps } = this.props.form;
    const { PayIncrease } = this.props
    return (
       <div>
          <div> delist</div>
          <div> {this.props.list}</div>
          <div> {this.props.title}</div>
          <div> {this.props.userName}</div>
          
          <input type="text" ref="myNum" />
          <div> {React.Children.map(this.props.children,function(child){
              return child

          })}</div>
          <button onClick={this.handClick}>clik me</button>
          <button onClick={this.props.func}>注册</button>
          <button onClick={this.handClick2}>方法传递</button>
          <button onClick={PayIncrease}>升职加薪</button>
        </div>
        
    );
  }
  componentDidMount(){
      console.log(this)
    //   console.log(store);
    this.props.func();
    // setTimeout(()=>{
    // this.props.history.push('/layout/second');
    // },2000)
}
}

// const BasicInputExampleWrapper = createForm()(BasicInputExample);
// ReactDOM.render(<BasicInputExampleWrapper />, mountNode);
// class Login extends Component {
//   render() {
//     return (
//       <BasicInputExample />
//     );
//   }
// }
//需要渲染什么数据
const getList = state => {
    console.log(state,'state')
    return {
        list: state.userInfo.cityName,
        userName:state.userInfo.userName
    }
}
console.log(getList, 'getList')
//需要触发什么行为,必须要引用redux中actions的方法
function mapDispatchToProps(dispatch) {
    // console.log(dispatch(update()),'dispatch')
    return {
        PayIncrease: () => {dispatch(update('libai'));console.log()},
        PayDecrease: () => dispatch()
    }
  }
// Dlist = connect()(Dlist)
export default connect(getList,mapDispatchToProps)(Dlist);

7.index.js 在全局中的引入

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import routes from './configs/router.config'
import RouteWithSubRoutes from './configs/route-with-sub-routes'
import 'antd-mobile/dist/antd-mobile.css';  // or 'antd-mobile/dist/antd-mobile.less'
import { Provider } from 'react-redux';
import configureStore from './redux/index.js';
import {BrowserRouter as Router,Route, Switch,Redirect } from 'react-router-dom';
import {
    update,
    add,
    rm
  } from './redux/actions'
  
// import { Button } from 'antd-mobile';
// ReactDOM.render(<Button>Start</Button>, mountNode);
const store = configureStore();
// console.log(store.getState(),'123');
// store.dispatch(update('libai'))
console.log(store.getState(),'123')
ReactDOM.render( 
    // let token = 'qwe'
    <Provider store={store} >
        {/* <Routes /> */}
        <Router>
        <Switch>
                         {routes.map((route, i) => <RouteWithSubRoutes key={i} {...route} />)}
                    </Switch>
        {/* <Switch>           
        { 
            routes.map((route, index) => { 
            // return <Route key={index} path={route.path} exact render={props =>
            //     (!route.auth ? (<route.component {...props} routes={route.routes}/>) : (true ? <route.component {...props} routes={route.routes} /> : 
            //     <Redirect to={{pathname: '/',state: { from: props.location }}} />)
            //     )} />
            return <Route key={index} path={route.path} exact render={props =>
                <route.component {...props} routes={route.routes}/>} />
        })

        }
        </Switch> */}
        </Router>
    </Provider>
    , 
    document.getElementById('root')
);

serviceWorker.unregister();

其他redux的高级用法请参考https://www.redux.org.cn/docs/basics/Reducers.html